Highlight code in articles using highlight.js

3 files changed, 12 insertions, 1 deletions

diff --git a/app/Resources/static/themes/_global/index.js b/app/Resources/static/themes/_global/index.js
index fddb476d..7f7e87c0 100644
--- a/app/Resources/static/themes/_global/index.js
+++ b/app/Resources/static/themes/_global/index.js
@@ -13,8 +13,10 @@ import './global.scss';
 import './js/shortcuts/entry';
 import './js/shortcuts/main';
 
-import { savePercent, retrievePercent } from './js/tools';
+/* Hightlight */
+import './js/highlight';
 
+import { savePercent, retrievePercent } from './js/tools';
 
 /* ==========================================================================
  Annotations & Remember position
diff --git a/app/Resources/static/themes/_global/js/highlight.js b/app/Resources/static/themes/_global/js/highlight.js
new file mode 100644
index 00000000..4025fc14
--- /dev/null
+++ b/app/Resources/static/themes/_global/js/highlight.js
@@ -0,0 +1,8 @@
+import 'highlight.js/styles/atom-one-light.css';
+import * as hljs from 'highlight.js';
+
+window.addEventListener('load', () => {
+  document.querySelectorAll('pre').forEach((node) => {
+    hljs.highlightBlock(node);
+  });
+});
diff --git a/package.json b/package.json
index e6659bd3..8d856bbb 100644
--- a/package.json
+++ b/package.json
@@ -65,6 +65,7 @@
   "dependencies": {
     "annotator": "git://github.com/wallabag/annotator.git#0f076c7d371ed25eb0793346f46982d90f2c4c85",
     "hammerjs": "^2.0.8",
+    "highlight.js": "^9.12.0",
     "icomoon-free-npm": "^0.0.0",
     "jquery": "^2.1.4",
     "jquery.cookie": "^1.4.1",