highlight.js
フレームワーク | 利用方法 |
Google Code Prettify | |
highlight.js | CDN or ファイルDL(CDNの方が動作が軽い) |
base.html |
<head> <link rel=”stylesheet”href=”https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.7.0/build/styles/default.min.css”> ①</head> <body>~~~ <script src=”https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.7.0/build/highlight.min.js”></script> <script>hljs.initHighlightingOnLoad();</script></body> |
テーマを変更する際は①の「default.min.css」の部分を「monokai-sublime.min.css」にする
summernote内でソースコードを<pre><code></code></pre>で囲むと
Highlight.jsがcodeタグ内のソースコードを認識してハイライトする