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>に貼り付ける
    1. <!-- google-code-prettify -->
    2.     <script src='https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sons-of-obsidian'/>
    3.     <style type='text/css'>
    4.         pre.prettyprint {
    5. 　　　　　　overflow: auto;
    6.         }
    7.         .prettyprint ol.linenums &gt; li {
    8.             list-style-type: decimal; 
    9.         }
    10.     </style>
    11. <!-- /google-code-prettify -->

使用方法

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

備考

  • 下記のように、言語を指定することも可能である。指定できる言語は、ここを参照。
    1. <pre class="prettyprint lang-yaml linenums" >
    2. - name : tomato
    3.   email: tomato@gmail.com
    4. - name : potato
    5.   email: potato@gmail.com
    6. </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...