コードのシンタックスハイライトに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フロントエンドsyntaxhighlightシンタックスハイライトjavascriptcsshtml
  • 新しい記事へ
    CentOS6にpipコマンドでPillowをインストールする

    古い記事へ
    CentOS6環境にpyenv, mod_wsgi, apacheを入れ、djangoを動かしてみた記録

profile picture

自己紹介的な何か

@wkmettyでついったーやってます。時々。 6年間勤めたゲーム会社を2018年2月に退職しフリーランスのプログラマに。 WordPress Core, WP-CLI コントリビューター。 お仕事募集中です。