コードのシンタックスハイライトにhighlight.jsを使った時の話|カメラのちプログラミング♥ところによりカフェ

コードのシンタックスハイライトにhighlight.jsを使った時の話

2016/07/16 18:18

ただの作業メモ
・使ったライブラリ
highlight.js

162言語、72のスタイルに対応しているようです。
上記サイトからダウンロードをしますが、ダウンロード前にどの言語を有効にするかを
選べるようになっているので、自分に必要な物を追加でチェックします。
ここ
自分の場合は、Django, YAML, SCSSを追加でチェックしました。
ZIPがダウンロードされるので、あとはサイトに設置するだけ。
highlight.pack.jsが本体。
その他、諸々のスタイルが記述されてるCSSが格納されています。（設置はどれか一つでOK）

デモサイトから好きなスタイルを選びます。
自分はGihubスタイルを選びました。（github.css）
シンタックスハイライトの機能を有効にする
では実際にJSを読み込んで
highlight.jsを有効にします。
```
/* </body> の直前に記述 */
<script type="text/javascript" src="/path/to/file/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script> /* 実行のおまじない（をぃ */
```
シンタックスハイライトのスタイルを適用する
```
/* HEAD 内に */
<link rel="stylesheet" href="/path/to/file/github.css">
```
さっそく試してみる
以下の様なコードを書くことで、シンタックスハイライトできます。
```
/* たとえば、HTMLをハイライトさせる */
<code class="html">
<html>
    <head>
        <title>ハイライトのテスト</title>
    </head>
    <body>
        <h1>テストテスト</h1>
    </body>
</html>
</code>
```
codeタグのclassに指定できる値は、以下のページに記載されているので参考にします。
https://highlightjs.readthedocs.io/en/latest/css-classes-reference.html

↑応援よろしくお願いします！m(_ _)m
<2016/07/16 18:14>
WEBフロントエンド
WEB フロントエンド syntax highlight シンタックスハイライト javascript css html
新しい記事へ
CentOS6にpipコマンドでPillowをインストールする
古い記事へ
CentOS6環境にpyenv, mod_wsgi, apacheを入れ、djangoを動かしてみた記録

シンタックスハイライトの機能を有効にする

シンタックスハイライトのスタイルを適用する

さっそく試してみる

自己紹介的な何か

Popular Articles