diff --git a/v1/lib/core/renderMarkdown.js b/v1/lib/core/renderMarkdown.js index 27adace730a3..8fd17e17fb7b 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 111de59b2596..000000000000
--- 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 b0716e6800ad..16f1e0a64eeb 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,
     });