Use specific highlighters instead of including all of them. Halves the bundle size
This commit is contained in:
@ -38,6 +38,7 @@
|
||||
"eslint-plugin-babel": "^3.0.0",
|
||||
"eslint-plugin-react": "^3.14.0",
|
||||
"github-slugger": "^1.0.1",
|
||||
"highlight.js": "^9.2.0",
|
||||
"isomorphic-fetch": "^2.2.0",
|
||||
"lodash.debounce": "^4.0.3",
|
||||
"minifyify": "^7.1.0",
|
||||
@ -45,7 +46,6 @@
|
||||
"react-dom": "^0.14.6",
|
||||
"react-pure-render": "^1.0.2",
|
||||
"remark": "^3.2.0",
|
||||
"remark-highlight.js": "^2.0.0",
|
||||
"remark-html": "^2.0.2",
|
||||
"remark-slug": "^3.0.1",
|
||||
"unist-util-select": "^1.3.0",
|
||||
|
@ -1,7 +1,7 @@
|
||||
import React from 'react';
|
||||
import remark from 'remark';
|
||||
import remarkHTML from 'remark-html';
|
||||
import remarkHighlight from 'remark-highlight.js';
|
||||
import remarkHighlight from '../highlight';
|
||||
import PureRenderMixin from 'react-pure-render/mixin';
|
||||
import { postHighlight } from '../../custom';
|
||||
|
||||
|
39
src/highlight.js
Normal file
39
src/highlight.js
Normal file
@ -0,0 +1,39 @@
|
||||
import visit from 'unist-util-visit';
|
||||
|
||||
import hljs from 'highlight.js/lib/highlight';
|
||||
import python from 'highlight.js/lib/languages/python';
|
||||
import javascript from 'highlight.js/lib/languages/javascript';
|
||||
import json from 'highlight.js/lib/languages/json';
|
||||
import bash from 'highlight.js/lib/languages/bash';
|
||||
|
||||
hljs.registerLanguage('python', python);
|
||||
hljs.registerLanguage('javascript', javascript);
|
||||
hljs.registerLanguage('json', json);
|
||||
hljs.registerLanguage('bash', bash);
|
||||
|
||||
/**
|
||||
* Adapted from remark-highlight.js
|
||||
* https://github.com/ben-eb/remark-highlight.js
|
||||
*/
|
||||
export default function attacher() {
|
||||
function visitor(node) {
|
||||
if (!node.lang) {
|
||||
return;
|
||||
}
|
||||
|
||||
let data = node.data;
|
||||
|
||||
if (!data) {
|
||||
node.data = data = {};
|
||||
}
|
||||
|
||||
data.htmlContent = hljs.highlightAuto(node.value, [node.lang]).value;
|
||||
data.htmlAttributes = data.htmlAttributes || {};
|
||||
data.htmlAttributes.class = [
|
||||
'hljs',
|
||||
data.htmlAttributes.class
|
||||
].filter(Boolean).join(' ');
|
||||
}
|
||||
|
||||
return ast => visit(ast, 'code', visitor);
|
||||
}
|
Reference in New Issue
Block a user