[code-prettify]Bloggerブログのコードを強調して見やすくする[シンタックスハイライト]

投稿者：Y


ラベル：blogger


公開：2020年9月8日


更新：2020年9月8日



code

コード

<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js">
</script>
<pre class="prettyprint linenums" style="overflow: auto";>
ここにコードを入力します。
</pre>

表示

<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js">
</script>
<pre class="prettyprint linenums" style="overflow: auto";>
ここにコードを入力します。
</pre>

解説

Bloggerのシンタックスハイライトとの対応色は、
初期設定だと
緑→青、青→紫、赤→緑

scriptタグ

HTML内のどこでも設置可能

preタグ

・preformatted text(整形済みテキスト)の略

・class属性にlinenumsを追加することにより、番号が追加される(初期設定は5ずつ)

・style属性でoverflow: autoを設定すると、横スクロールが可能になる

・特殊文字は変換の必要あり

Bloggerの「作成ビュー」から「HTMLビュー」への切り替えで変換が出来る

(例)

<→&lt;
>→&gt;