ライブドアブログにプログラムコードを簡単キレイに表示する方法

2019/10/13

ライフハック

t f B! P L
■対象者
楽な方法(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」を使用する方法もあるらしいが
めんどうそうなので割愛。
以上。

ブログ アーカイブ

ラベル

このブログを検索

スポンサーリンク

自己紹介

機械メーカー総合職正社員10年勤務後退職。 エクセルVBAプログラム歴 5年。 LibreOffice(無料)でVBAマクロ検証。
■Fortniteクエスト攻略動画■
■Twitter■
⇒詳細プロフィールを表示

QooQ