2019/08/15

Blogger上でコードを埋め込む方法

背景

ソフトウェアエンジニアとして活動する中で、個人の備忘録をかねてBloggerで技術メモを作成することにした。記事内でコードを表示する場合があるため、Bloggerの記事でコードを埋め込む方法を調査した。

記事の目的

Bloggerの記事でコードを表示する

google-code-prettify

ここでは、技術メモ内におけるコードの埋め込み方法について記載する。技術メモでは、基本的にgoogle-code-prettifyでコードの表示を行う。

選定理由

google-code-prettifyの選定理由は、下記の通りである。
  • 複数の言語をサポートしている
  • 行番号を表示できる
  • PC表示時にスクロールバーを表示可能
  • 導入が容易

導入方法

google-code-prettifyの導入手順は、下記の通りである。
  1. Blogger管理画面を開く
  2. 「テーマ」 を選び、 「HTMLの編集」をクリックする
  3. 下記Javascriptコードを、html内の<head>...</head>に貼り付ける
    4. <!-- google-code-prettify -->
    <script src='https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sons-of-obsidian'/>
    <style type='text/css'>
        pre.prettyprint {
　　　　　　overflow: auto;
        }
        .prettyprint ol.linenums &gt; li {
            list-style-type: decimal; 
        }
    </style>
<!-- /google-code-prettify -->

使用方法

google-code-prettifyの使用方法は、下記の通りである。
<pre class="prettyprint linenums">
int sample_code(int b)
{
    int a = 10;
    a += b;
    return a;
}
</pre>
上記の通り記述すると、下記のように表示される。
int sample_code(int b)
{
    int a = 10;
    a += b;
    return a;
}

備考

  • 下記のように、言語を指定することも可能である。指定できる言語は、ここを参照。
    • <pre class="prettyprint lang-yaml linenums" >
- name : tomato
  email: tomato@gmail.com
- name : potato
  email: potato@gmail.com
</pre>
  • 記事にコード埋め込む際は、HTMLに直接記述する。「作成」で記述した場合、正しく作成されない場合がある
  • <style type='text/css'>...</style>にスタイルに関する記述を追記することで、見た目の変更が可能である
  • Javascriptコードの4-6行目で、スクロールバー表示を設定している
  • Javascriptコードの7-9行目で、行番号を毎行表示に設定している

まとめ

  • 技術メモ作成にあたり、Bloggerにコードを表示させる方法を記述した
  • google-code-prettifyは、htmlの<head>...</head>間に、該当Javascriptコードを記入することで使用可能である

参考文献


変更履歴

  1. 2019/08/15: 新規作成
  2. 2019/08/23: 備考追記
時刻:
ラベル: ,

0 件のコメント:

コメントを投稿

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

MQTTの導入

背景 IoTデバイスの接続環境構築のため、MQTT(mosquitto)の導入を行った。 記事の目的 MQTT(mosquitto)をUbuntuに導入する mosquitto ここではmosquittoについて記載する。 MQTT MQTT(Message Qu...