From aae5c4dc85ab6f04d4d7c7ad99b926e57fdd4fb9 Mon Sep 17 00:00:00 2001 From: Erik Sultanaliev Date: Fri, 5 Oct 2018 13:59:24 +0600 Subject: [PATCH] fix: highlightjs custom highlighting function(#1016) * Added line for syntax definition #960 * chore: nits & fix for v2 as well --- v1/lib/core/renderMarkdown.js | 5 +++++ v2/lib/theme/Markdown/highlight.js | 22 ------------------- v2/lib/theme/Markdown/index.js | 35 ++++++++++++++++++++++++++++-- 3 files changed, 38 insertions(+), 24 deletions(-) delete mode 100644 v2/lib/theme/Markdown/highlight.js diff --git a/v1/lib/core/renderMarkdown.js b/v1/lib/core/renderMarkdown.js index 27adace730..8fd17e17fb 100644 --- a/v1/lib/core/renderMarkdown.js +++ b/v1/lib/core/renderMarkdown.js @@ -27,6 +27,11 @@ class MarkdownRenderer { // This results in

       langPrefix: 'hljs css language-',
       highlight(str, lang) {
+        // User's own custom highlighting function
+        if (siteConfig.highlight && siteConfig.highlight.hljs) {
+          siteConfig.highlight.hljs(hljs);
+        }
+        // Fallback to default language
         lang =
           lang || (siteConfig.highlight && siteConfig.highlight.defaultLang);
         if (lang === 'text') {
diff --git a/v2/lib/theme/Markdown/highlight.js b/v2/lib/theme/Markdown/highlight.js
deleted file mode 100644
index 111de59b25..0000000000
--- a/v2/lib/theme/Markdown/highlight.js
+++ /dev/null
@@ -1,22 +0,0 @@
-const hljs = require('highlight.js');
-const chalk = require('chalk');
-const escapeHtml = require('escape-html');
-
-export default (str, rawLang) => {
-  if (rawLang === 'text' || !rawLang) {
-    return escapeHtml(str);
-  }
-  const lang = rawLang.toLowerCase();
-  try {
-    if (hljs.getLanguage(lang)) {
-      return hljs.highlight(lang, str).value;
-    }
-  } catch (e) {
-    console.error(
-      chalk.yellow(
-        `Highlight.js syntax highlighting for language "${lang}" is not supported.`,
-      ),
-    );
-  }
-  return hljs.highlightAuto(str).value;
-};
diff --git a/v2/lib/theme/Markdown/index.js b/v2/lib/theme/Markdown/index.js
index b0716e6800..16f1e0a64e 100644
--- a/v2/lib/theme/Markdown/index.js
+++ b/v2/lib/theme/Markdown/index.js
@@ -3,7 +3,9 @@
 import React from 'react';
 import Markdown from 'remarkable';
 import Helmet from 'react-helmet';
-import highlight from './highlight';
+import hljs from 'highlight.js';
+import chalk from 'chalk';
+import escapeHtml from 'escape-html';
 import anchors from './anchors';
 
 class MarkdownBlock extends React.Component {
@@ -36,7 +38,36 @@ class MarkdownBlock extends React.Component {
     const {siteConfig} = this.props;
     const md = new Markdown({
       langPrefix: 'hljs css language-',
-      highlight: highlight,
+      highlight: function(str, rawLang) {
+        // Default language fallback
+        const defaultLang =
+          siteConfig.highlight && siteConfig.highlight.defaultLang;
+
+        // No syntax highlighting
+        if (rawLang === 'text' || (!rawLang && !defaultLang)) {
+          return escapeHtml(str);
+        }
+
+        // User's own hljs function to register additional languages
+        if (siteConfig.highlight && siteConfig.highlight.hljs) {
+          siteConfig.highlight.hljs(hljs);
+        }
+
+        // Syntax highlighting
+        const lang = rawLang.toLowerCase() || defaultLang;
+        try {
+          if (hljs.getLanguage(lang)) {
+            return hljs.highlight(lang, str).value;
+          }
+        } catch (e) {
+          console.error(
+            chalk.yellow(
+              `Highlight.js syntax highlighting for language "${lang}" is not supported.`,
+            ),
+          );
+        }
+        return hljs.highlightAuto(str).value;
+      },
       html: true,
       linkify: true,
     });