vbatts/quay
Archived
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

use Webpack code-splitting to dynamically import Highlight.js languages as they are detected by Showdown Markdown extension

Browse source
This commit is contained in:
Alec Merdler 2017-08-01 13:28:24 -04:00
parent 8dc2a99926
commit 41c12c853c
9 changed files with 70 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

20
static/js/directives/ui/markdown/markdown.module.ts
View file

@ -1,5 +1,5 @@
import { NgModule } from 'ng-metadata/core';
import { Converter, ConverterOptions } from 'showdown';
import { Converter } from 'showdown';
import * as showdown from 'showdown';
import { registerLanguage, highlightAuto } from 'highlight.js/lib/highlight';
import 'highlight.js/styles/vs.css';
@ -10,14 +10,15 @@ const highlightedLanguages: string[] = require('../../../constants/highlighted-l
* Dynamically fetch and register a new language with Highlight.js
*/
export const addHighlightedLanguage = (language: string): Promise<{}> => {
return new Promise((resolve, reject) => {
return new Promise(async(resolve, reject) => {
try {
// TODO(alecmerdler): Use `import()` here instead of `require()`
const langModule = require(`highlight.js/lib/languages/${language}`);
// TODO(alecmerdler): Use `import()` here instead of `System.import()` after upgrading to TypeScript 2.4
const langModule = await System.import(`highlight.js/lib/languages/${language}`);
registerLanguage(language, langModule);
console.debug(`Language ${language} registered for syntax highlighting`);
resolve();
} catch (error) {
console.log(`Language ${language} not supported for syntax highlighting`);
console.debug(`Language ${language} not supported for syntax highlighting`);
reject(error);
}
});
@ -25,7 +26,7 @@ export const addHighlightedLanguage = (language: string): Promise<{}> => {
/**
* Showdown JS extension for syntax highlighting using Highlight.js
* Showdown JS extension for syntax highlighting using Highlight.js. Will attempt to register detected languages.
*/
export const showdownHighlight = (): showdown.FilterExtension => {
const htmlunencode = (text: string) => {
@ -39,7 +40,10 @@ export const showdownHighlight = (): showdown.FilterExtension => {
const right = '</code></pre>';
const flags = 'g';
const replacement = (wholeMatch: string, match: string, leftSide: string, rightSide: string) => {
// TODO(alecmerdler): Call `addHighlightedLanguage` to load new languages that are detected using code-splitting
const language: string = leftSide.slice(leftSide.indexOf('language-') + ('language-').length,
leftSide.indexOf('"', leftSide.indexOf('language-')));
addHighlightedLanguage(language).catch(error => null);
match = htmlunencode(match);
return leftSide + highlightAuto(match).value + rightSide;
};
@ -53,7 +57,7 @@ export const showdownHighlight = (): showdown.FilterExtension => {
};
// Dynamically import syntax-highlighting supported languages
// Import default syntax-highlighting supported languages
highlightedLanguages.forEach((langName) => addHighlightedLanguage(langName));