Enable using Prism for syntax highlighting (#735)

* Enable user to use prism.js as syntax highlighter * add package-lock * if 'usePrism' is true, use prismjs on all languages * don't get lang by hljs if use prism * Update api-site-config.md * Update api-doc-markdown.md * only load prism css when usePrism is true
facebook · Jun 9, 2018 · c8bc00a · c8bc00a
1 parent 16da2fd
commit c8bc00a
Show file tree

Hide file tree

Showing 10 changed files with 292 additions and 12 deletions.
diff --git a/docs/api-doc-markdown.md b/docs/api-doc-markdown.md
@@ -180,3 +180,31 @@ While Highlight.js provides support for [many popular languages out of the box](
   }
 }
 ```
+
+### Using Prism as additional syntax highlighter
+
+While highlight.js supports a lot of languages, you can opt to use Prism to syntax highlight certain languages available in the list [here](https://github.com/PrismJS/prism/tree/master/components). Include those languages in `usePrism` field in your [siteConfig.js](api-site-config.md)
+
+Example:
+```
+// siteConfig.js
+usePrism: ['jsx']
+```
+
+Notice that the code block below uses JSX syntax highlighting from Prism.
+
+```jsx
+class Example extends React.Component {
+  render() {
+    return (
+      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+        <Text>Docusaurus</Text>
+        <Button
+          title="Click me"
+          onPress={() => this.props.navigation.push('Docusaurus')}
+        />
+      </View>
+    );
+  }
+}
+```
diff --git a/docs/api-site-config.md b/docs/api-site-config.md
@@ -173,6 +173,8 @@ h1 {
 
 `users` - The `users` array mentioned earlier.
 
+`usePrism` - Array of languages to use Prism syntax highlighter. Refer to [Using Prism as additional syntax highlighter](api-doc-markdown.md#using-prism-as-additional-syntax-highlighter). Set it to `true` to use Prism on all languages.
+
 `wrapPagesHTML` - Boolean flag to indicate whether `html` files in `/pages` should be wrapped with Docusaurus site styles, header and footer. This feature is experimental and relies on the files being `html` fragments instead of complete pages. It inserts the contents of your `html` file with no extra processing. Defaults to `false`.
 
 Users can also add their own custom fields if they wish to provide some data across different files.

diff --git a/lib/core/Head.js b/lib/core/Head.js
@@ -175,7 +175,12 @@ class Head extends React.Component {
             }}
           />
         )}
-
+        {this.props.config.usePrism && (
+          <link
+            rel="stylesheet"
+            href={this.props.config.baseUrl + 'css/prism.css'}
+          />
+        )}
         {/* Site defined code. Keep these at the end to avoid overriding. */}
         <link
           rel="stylesheet"

diff --git a/lib/core/renderMarkdown.js b/lib/core/renderMarkdown.js
@@ -7,25 +7,46 @@
 
 const hljs = require('highlight.js');
 const Markdown = require('remarkable');
+const prismjs = require('prismjs');
 
 const anchors = require('./anchors.js');
 
 const CWD = process.cwd();
 
+const alias = {
+  js: 'jsx',
+};
+
 class MarkdownRenderer {
   constructor() {
     const siteConfig = require(CWD + '/siteConfig.js');
 
     const md = new Markdown({
       // Highlight.js expects hljs css classes on the code element.
       // This results in <pre><code class="hljs css javascript">
-      langPrefix: 'hljs css ',
+      langPrefix: 'hljs css languages- ',
       highlight: function(str, lang) {
         lang =
           lang || (siteConfig.highlight && siteConfig.highlight.defaultLang);
-        if (lang && hljs.getLanguage(lang)) {
+        if (lang) {
           try {
-            return hljs.highlight(lang, str).value;
+            if (
+              siteConfig.usePrism === true ||
+              (siteConfig.usePrism &&
+                siteConfig.usePrism.length > 0 &&
+                siteConfig.usePrism.indexOf(lang) !== -1)
+            ) {
+              try {
+                const language = alias[lang] || lang;
+                // Currently people using prismjs on Node have to individually require()
+                // every single language (https://github.com/PrismJS/prism/issues/593)
+                require('prismjs/components/prism-' + language + '.min');
+                return prismjs.highlight(str, prismjs.languages[language]);
+              } catch (err) {}
+            }
+            if (hljs.getLanguage(lang)) {
+              return hljs.highlight(lang, str).value;
+            }
           } catch (err) {}
         }
 

diff --git a/lib/static/css/main.css b/lib/static/css/main.css
@@ -1870,4 +1870,4 @@ footer .social {
   footer.nav-footer {
     flex-shrink: 0;
   }
-}
+}
diff --git a/lib/static/css/prism.css b/lib/static/css/prism.css
@@ -0,0 +1,130 @@
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+
+code[class*="language-"],
+pre[class*="language-"] {
+  color: black;
+  background: none;
+  text-shadow: 0 1px white;
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
+  text-shadow: none;
+}
+
+pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
+code[class*="language-"]::selection, code[class*="language-"] ::selection {
+  text-shadow: none;
+}
+
+@media print {
+  code[class*="language-"],
+  pre[class*="language-"] {
+    text-shadow: none;
+  }
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: .5em 0;
+  overflow: auto;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+  padding: .1em;
+  border-radius: .3em;
+  white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: slategray;
+}
+
+.token.punctuation {
+  color: #999;
+}
+
+.namespace {
+  opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #905;
+}
+
+.token.selector,
+.token.number,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #690;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  color: #9a6e3a;
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: #07a;
+}
+
+.token.function,
+.token.class-name {
+  color: #DD4A68;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+  color: #e90;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}