ラベル Blogger の投稿を表示しています。 すべての投稿を表示
ラベル Blogger の投稿を表示しています。 すべての投稿を表示

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 件のコメント:
ラベル: ,

Blogger上で数式を表示する方法

背景

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

記事の目的

Bloggerの記事で数式を表示する

MathJax

ここでは、技術メモ内における数式の作成方法について記載する。
技術メモでは、基本的にMathJaxで数式の作成を行う。

選定理由

MathJaxの選定理由は、下記の通りである。
  • Tex形式で数式を記述できる
  • ブログ記事内に直接数式を記述することで、数式が自動生成される

導入方法

MathJaxの導入手順は、下記の通りである。
  1. Blogger管理画面を開く
  2. 「テーマ」 を選び、 「HTMLの編集」をクリックする
  3. 下記Javascriptコードを、html内の<head>...</head>に貼り付ける
    4. <!-- MathJax -->
<script 
  src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js'
  type='text/javascript'>    
  MathJax.Hub.Config({
    HTML: ['input/TeX','output/HTML-CSS'],
    TeX: { extensions: ['AMSmath.js','AMSsymbols.js'], 
      equationNumbers: { autoNumber: 'AMS' } },
      extensions: ['tex2jax.js'],
      jax: ['input/TeX','output/HTML-CSS'],
      tex2jax: { inlineMath: [ ['$','$'], ['\\(','\\)'] ],
      displayMath: [ ['$$','$$'], ['\\[','\\]'] ],
      processEscapes: true },
      'HTML-CSS': { availableFonts: ['TeX'],
      linebreaks: { automatic: true } }
  });
</script>
<!-- /MathJax -->

使用方法

MathJaxの使用方法は、下記の通りである。

  • インライン表示の場合
    • インライン表示: $e^{i\pi}=-1$
    インライン表示: $e^{i\pi}=-1$
  • 独立行表示の場合
    • $$\sum_{i=1}^{n}i = \frac{1}{2}n(n+1)$$
    $$\sum_{i=1}^{n}i = \frac{1}{2}n(n+1)$$

備考

  • MathJaxのJavascriptコードURL:(https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js)は将来的に変更される可能性がある。有効なURLはMathJaxのGetting Startに記載されている。
  • Broggerのテーマによっては、数式が表示されない。現状動作確認しているのは、「シンプル」のみである。
  • BroggerのテーマのHTMLを編集する際、「"」(ダブルクオート)を使用すると、文字化けし、正しく動作しない場合がある。 

まとめ

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

参考文献


変更履歴

  1. 2019/08/15: 新規作成

時刻: 0 件のコメント:
ラベル: ,
登録: 投稿 (Atom)

MQTTの導入

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