Prism Syntax Highlighterを入れてみた (3/21の日記)

嶽内の森

2017-03-21

旧日記

旧ブログ

前略

鴉河雛です

というわけで、帰宅早々寝落ちした挙句、禅Ultraさんを下敷きにしたせいでガラスフィルムがわれてしまった私です

せっかくなのでアンチグレアフィルムを試そうと、新しいのを購入したのでそれは届き次第また・・

で！本題。CKEditorのCodeSnippetは便利なんだけど、スクロールできなかったり、コピーできなかったり・・・

行番号が出なかったりとちょっとあれだったので、Prism Syntax Highlighterを入れました。

いわゆるSyntax Highlighterは重いとか色々言われてますが、個人的には気にならないので・・（別ものか）

導入にはまず、lineutils・widget・codesnippetが入っている必要がありますが、

widgetは元々入っているので、ここではlineutils・codesnippetを入れていく必要があります。

（導入方法は割愛・別ページにて非正規方法？を紹介済み）

導入が済んだら、prismのページに行き、PluginをDLします。

ここで、カスタマイズをしたい人は、prismjsのページに行き、やりたい内容をぽちぽち選択してください。

もちろん言語とかも選べますので、不要な言語を外したりとか・・テーマを変えたりとか色々できます。

ちなみに、個人的にLineNumbersとShowLanguage、CopytoClipboardButtonがおすすめです。

圧縮版も選べるので特に問題がなければそちらにしましょう。

prismも導入し終えたら、中のJSを先程DLしたやつに差し替えて準備完了。

導入し終えたら、忘れずにトラッキングコードを追加してください。

<script src="/prism/lib/prism/prism.js"></script>
<link href="/prism/lib/prism/prism.css" rel="stylesheet">

で、使い方。

codesnippetを入れているので、コードの打ち込みはそちらで行い、通常通り追加してください。

行番号を表示したい場合は、classに以下を追加すれば表示されます

line-numbers

行番号を選択したい場合は、preにdata-line要素を追加してあげます

●再生準備処理
    //再生前初期化

    再生関連フラグの再生フラグは1 //再生中
    再生ボタンのテキストは「||」 //再生中（一時停止表示に）
    選択歌詞ファイルは空

    再生関連フラグのあるぷれフラグで条件分岐
        0ならば    //ファイル選択再生
        1ならば    //プレイリスト再生
        2ならば    //アルバム再生
        違えば
            「えらー」と言う

    タイトルラベルのテキストは再生関連フラグの再生リスト[曲リストグリッドの値-1,3]
    選択音楽ファイルを「.lrc」に拡張子変更を選択歌詞ファイルへ代入

    再生処理

上記は、下記の感じで入れています（１行目ですね、行番号と一緒に使うとおかしくなりますが。。）

<pre data-line="4-5,7,14-15">
<code class="language-none,line-numbers">●再生準備処理
    //再生前初期化

    再生関連フラグの再生フラグは1 //再生中
    再生ボタンのテキストは「||」 //再生中（一時停止表示に）
    選択歌詞ファイルは空

    再生関連フラグのあるぷれフラグで条件分岐
        0ならば    //ファイル選択再生
        1ならば    //プレイリスト再生
        2ならば    //アルバム再生
        違えば
            「えらー」と言う

    タイトルラベルのテキストは再生関連フラグの再生リスト[曲リストグリッドの値-1,3]
    選択音楽ファイルを「.lrc」に拡張子変更を選択歌詞ファイルへ代入

    再生処理
</code></pre>

とまぁ。適当な感じでしたが今日はこの辺で！

うじゃ