2020年9月15日火曜日

Blogger.comでSyntaxHighlighterからPrism.jsに乗り替え

どうも、もりもりです。

ソースコードなどをキレイに見せてくれるシンタックスハイライト。
以前はSyntaxHighlighterを使用していたのですが
公式サイトがなくなってしまい？ アクセスできなくなっていたため
ブログの表示がものすごく遅くなっていました。
(Githubにはソースはあるようですが)
そのためテーマから削除することに。。。

で、そのまま放置していたのですが、今回もりもりの連載で
ソースコードなどを載せることがあったので他にイイのがないか
探してみました。
そこで見つけたのが Prism.js でした。
設定方法や使い方をメモとして残しておこうと思います。

プラグインの選定

まずはプラグインを選定します。
今回は下記のプラグインを使用します。
・Line Numbers
　　行番号を表示
・Line Highlight
　　指定行をハイライト
・Toolbar
　　ツールボタンを表示するバーを追加
　　Copy to Clipboard, Download Button, Show Language 使用時に必要
・Copy to Clipboard
　　コピーボタンをツールバーに表示
・Autoloader
　　ハイライトする言語を自動的にロード
・Command Line
　　コマンドライン用

設定方法

bloggerのテーマ→カスタマイズ→HTMLの編集でHTMLを開き
</head>と</body>の直前に下記を追加します。 

<head>
    ・・・
    ・・・
    <!-- Themes -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/themes/prism-tomorrow.min.css" />
<!-- All Themes
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/themes/prism.min.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/themes/prism-coy.min.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/themes/prism-dark.min.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/themes/prism-funky.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/themes/prism-okaidia.min.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/themes/prism-solarizedlight.min.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/themes/prism-tomorrow.min.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/themes/prism-twilight.min.css"/>
-->
    <!-- Line Numbers -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/plugins/line-numbers/prism-line-numbers.min.css" />
    <!-- Line Highlight -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/plugins/line-highlight/prism-line-highlight.min.css" />
    <!-- Toolbar (Copy to Clipboard, Download Button, Show Language 使用時に必要) -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/plugins/toolbar/prism-toolbar.min.css" />
    <!-- Command Line -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/plugins/command-line/prism-command-line.min.css" />
</head>

<body>
    ・・・
    ・・・
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/prism.min.js"></script>
    <!-- Line Numbers -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/plugins/line-numbers/prism-line-numbers.min.js"></script>
    <!-- Line Highlight -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/plugins/line-highlight/prism-line-highlight.min.js"></script>
    <!-- Toolbar (Copy to Clipboard, Download Button, Show Language 使用時に必要) -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/plugins/toolbar/prism-toolbar.min.js"></script>
    <!-- Copy to Clipboard -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script>
    <!-- Autoloader -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/plugins/autoloader/prism-autoloader.min.js"></script>
    <!-- Command Line -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/plugins/command-line/prism-command-line.min.js"></script>
</body>
追加したいプラグインのlinkやscriptタグは下記から選択できます。

後から知ったのですが、下記の方がラクかも。

使い方

■ Line Numbers

<pre class="line-numbers">
<code class="language-cs">if (string.IsNullOrEmpty(str)))
{
    // Nullまたは空文字の場合
}
else
{
    // Nullでも空文字でもない場合
}</code>
</pre>
こんな感じで<pre class="line-numbers">と指定すると
下記のように行番号が表示されます。
language-xxxはlang-xxxでもOKです。 
if (string.IsNullOrEmpty(str)))
{
    // Nullまたは空文字の場合
}
else
{
    // Nullでも空文字でもない場合
}

■ Line Highlight

<pre class="line-numbers" data-line="1,5-8">
<code class="lang-cs">if (string.IsNullOrEmpty(str)))
{
    // Nullまたは空文字の場合
}
else
{
    // Nullでも空文字でもない場合
}</code>
</pre>
こんな感じで<pre data-line="1,5-8">と指定すると
下記のように指定行がハイライト表示されます。
if (string.IsNullOrEmpty(str)))
{
    // Nullまたは空文字の場合
}
else
{
    // Nullでも空文字でもない場合
}

■ Command Line

※近々更新します！！！

なかなかイイ感じですね。
今回はテーマをTomorrowNightにしてますが他にも７種類あります。
サポートされている言語も多いですし今風な感じで気に入りました。
公式サイトでテーマやサポート言語、プラグインなど確認できます。
過去の記事でSyntaxHighlighterを使用していた箇所も
随時修正していきたいと思います。


以上、もりもりでした。
投稿者 時刻:
ラベル: , , , ,

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)