FEATURE: allow custom HighlightJS languages

FEATURE: allow custom HighlightJS languages

Adds pluginApi function that allows themes and plugins to register languages for HighlightJS.

diff --git a/app/assets/javascripts/discourse/lib/highlight-syntax.js.es6 b/app/assets/javascripts/discourse/lib/highlight-syntax.js.es6
index bfc24af..48543dc 100644
--- a/app/assets/javascripts/discourse/lib/highlight-syntax.js.es6
+++ b/app/assets/javascripts/discourse/lib/highlight-syntax.js.es6
@@ -1,4 +1,5 @@
 /*global hljs:true */
+let _moreLanguages = [];
 
 import loadScript from "discourse/lib/load-script";
 
@@ -14,6 +15,21 @@ export default function highlightSyntax($elem) {
 
   $(selector, $elem).each(function(i, e) {
     $(e).removeClass("lang-auto");
-    loadScript(path).then(() => hljs.highlightBlock(e));
+    loadScript(path).then(() => {
+      customHighlightJSLanguages();
+      hljs.highlightBlock(e);
+    });
+  });
+}
+
+export function registerHighlightJSLanguage(name, fn) {
+  _moreLanguages.push({ name: name, fn: fn });
+}
+
+function customHighlightJSLanguages() {
+  _moreLanguages.forEach(l => {
+    if (hljs.getLanguage(l.name) === undefined) {
+      hljs.registerLanguage(l.name, l.fn);
+    }
   });
 }
diff --git a/app/assets/javascripts/discourse/lib/plugin-api.js.es6 b/app/assets/javascripts/discourse/lib/plugin-api.js.es6
index ba10a5c..ecaff63 100644
--- a/app/assets/javascripts/discourse/lib/plugin-api.js.es6
+++ b/app/assets/javascripts/discourse/lib/plugin-api.js.es6
@@ -4,6 +4,7 @@ import ComposerEditor from "discourse/components/composer-editor";
 import DiscourseBanner from "discourse/components/discourse-banner";
 import { addButton } from "discourse/widgets/post-menu";
 import { includeAttributes } from "discourse/lib/transform-post";
+import { registerHighlightJSLanguage } from "discourse/lib/highlight-syntax";
 import { addToolbarCallback } from "discourse/components/d-editor";
 import { addWidgetCleanCallback } from "discourse/components/mount-widget";
 import {
@@ -40,7 +41,7 @@ import Sharing from "discourse/lib/sharing";
 import { addComposerUploadHandler } from "discourse/components/composer-editor";
 
 // If you add any methods to the API ensure you bump up this number
-const PLUGIN_API_VERSION = "0.8.26";
+const PLUGIN_API_VERSION = "0.8.27";
 
 class PluginApi {
   constructor(version, container) {
@@ -790,6 +791,23 @@ class PluginApi {
   replaceCategoryLinkRenderer(fn) {
     replaceCategoryLinkRenderer(fn);
   }
+
+  /**
+   * Registers custom languages for use with HighlightJS.
+   *
+   * See https://highlightjs.readthedocs.io/en/latest/language-guide.html
+   * for instructions on how to define a new language for HighlightJS.
+   * Build minified language file by running "node tools/build.js -t cdn" in the HighlightJS repo
+   * and use the minified output as the registering function.
+   *
+   * Example:
+   *
+   * let aLang = function(e){return{cI:!1,c:[{bK:"GET HEAD PUT POST DELETE PATCH",e:"$",c:[{cN:"title",b:"/?.+"}]},{b:"^{$",e:"^}$",sL:"json"}]}}
+   * api.registerHighlightJSLanguage("kibana", aLang);
+   **/
+  registerHighlightJSLanguage(name, fn) {
+    registerHighlightJSLanguage(name, fn);
+  }
 }
 
 let _pluginv01;

GitHub
sha: a953b717

1 Like