[Blogger] 記事にソースコードを記述する(Google-code-prettify)

 記事の中にソースコードを記載する方法は、あまたあるとは思いますが、ここでは Google-code-prettify を使う例を。ほとんど自分の備忘録ですが。

下記を参照しました。

Bloggerにソースコードを表示させる方法(Google-code-prettify) | 非IT企業に勤める中年サラリーマンのIT日記 (pineplanter.moo.jp)


Bloggerの設定でテーマを選び、HTMLの編集の<head>パートに以下を記載します。


<!-- Google-code-prettifyの導入 -->
<script src='https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=doxy'/>
<style type="text/css">
  /* 行番号の毎行表示 (設定しないと5行ごと表示) */
  .prettyprint ol.linenums > li{
    list-style-type: decimal;
  }
  /* スクロールバー表示 */
  pre.prettyprint {
    overflow: auto;
    word-wrap: normal;
  }
</style>
と設定は以上です。

なお、skin= で指定しているスキンの一覧は、以下で参照できます。
 
上記スキンのデモは以下サイトで確認できます。
 
使い方ですが、prettyprintは、<pre>の中の記載を整形してくれるものなので、Blogger記事の編集モードをHTMLビューにしてソースコード部分を<pre>~</pre>で囲んで記載する必要があります。
例えば、
<pre class="prettyprint lang-py">
def max(a, b)
    if a>b:
        return a
    else
        return b
</pre>
と書くと、
def max(a, b)
    if a>b:
        return a
    else
        return b
となります。
行番号を入れるときは。
<pre class="prettyprint lang-py linenums">
def max(a, b)
    if a>b:
        return a
    else
        return b
</pre>
のようにすれば、
def max(a, b)
    if a>b:
        return a
    else
        return b
となります。

このブログの人気の投稿

パズドラ 転生龍刀士降臨周回編成 (ベア戦)

パズドラ HUNTER☓HUNTER キメラアント周回編成 (ペア戦)

[Blender3.3] mmd_toolsはどれが最新?