楽な方法(Google Code Prettify)でライブドアブログ(PC版)に
プログラムコードをカラフルにキレイに表示したい人。
※スマホ版はカスタムJS動作せず対象外。以下のような表示になる。
■ライブドアブログのカスタムJS設定
「ブログ設定」を選択。「カスタムJS」を選択。
「head内」に
「<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=default"></script>」
記入する。上記スキン(skin)指定「default」の場合以下の表示となる。
他「default」の部分を変更した場合。
■「desert」
■「sunburst」
■「sons-of-obsidian」
■「doxy」
参考:Gallery of themes for code prettify
■ライブドアブログ定型文の追加
「ブログ設定」を選択。「定型文」を選択。
「新しい定型文を作る」選択。
「ラベル」に「コード表示」入力(わかりやすい任意の名前)。
「定型文」に「<pre class="prettyprint linenums:1">■</pre>」入力。
※「linenums:1」はプログラムコード開始行数。
例えば10にすると行数表示が10、11、12…となる。
「OK」おす。
「記事を書く」画面で「定型文」ボタンをおす。
⇒先ほど作った定型文を「ブログに貼る」
⇒「■」部分にプログラムコードを記述(貼りつけ)したものが以下となる。
REM ***** BASIC ***** Option VBASupport 1 '■■追記■■' Sub Main Cells(1, 1) = "Hello World" '■■追記■■' End Subプログラムコードが特殊文字を含む場合「HTMLエスケープツール」
などでググって出たサイトで変換したモノを貼りつける。
PC版画像は以下。
スマホ版画像は以下。
他に「SyntaxHighlighter」を使用する方法もあるらしいが
めんどうそうなので割愛。
以上。