Highlight code in articles using highlight.js

diff --git a/app/Resources/static/themes/_global/index.js b/app/Resources/static/themes/_global/index.js
index fddb476dcf67650fbf5cbd8f37b1b90e60b7e987..7f7e87c0e6bbf954ab683105bb30c5b6d1d03fec 100644 (file)
--- 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 (file)
index 0000000..4025fc1
--- /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 e6659bd33c9a69972cad2776c01dbde15ba4be8e..8d856bbb2803154f22bfbd64e8c610b1a4c4ed0d 100644 (file)
--- 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",