てつひラボ: Bloggerでプログラムコードを見やすく載せるメモ

どうもcaketetuです。

私はブログにプログラムコードを載せる時、短いコードは直接記載、長いコードは

google driveからリンクを貼って表示していました。しかし見栄えが悲惨な状況

だったので、今回はちょっとだけ見やすくしてみようと思います。

私は組み込み系はそこそこですが、WEB系はイマイチのため本記事は

以下のような人たち向けになるかと思います。

ちょっと見栄えを良くできればいい人
HTMLやCSSはあんまりいじりたくない人
外部のサーバやソフトを使いたくない人

１、短いコードを記事に埋め込むとき

code-prettifyを使用します。少しHTMLをいじることになりますが、

比較的簡単にコードを色分けして表示することができます。

#include <Wire.h>
#include <PCA9685.h>            //PCA9685用ヘッダーファイル（秋月電子通商作成）
 
PCA9685 pwm = PCA9685(0x40);    //PCA9685のアドレス指定（アドレスジャンパ未接続時）
 
#define SERVOMIN 700            //最小パルス幅 (標準的なサーボパルスに設定)
#define SERVOMAX 2300            //最大パルス幅 (標準的なサーボパルスに設定)
int LED = 13;
 
void setup() {
 pwm.begin();                   //初期設定 (アドレス0x40用)
 pwm.setPWMFreq(240);            //PWM周期を60Hzに設定 (アドレス0x40用)
 
  Serial.begin(115200);
  pinMode(LED, OUTPUT);
  Serial.println("Start reading.");
}
 
int n=0;
char buff[255];
                //手首R　肘　肩　
int angle[16] = {120,150,170,90,120,130,70,92,108,110,50,60,90,10,30,60};
int counter = 0;
 
void loop() {
//サンプルソース　１６ｃｈすべてのチャンネルより0度～180度の移動を繰り返します。
  if(Serial.available()){
    delay(10);
    digitalWrite(LED, HIGH);
    while(Serial.available()){ 
      buff[counter] = Serial.read();
      counter++;
    }
    Serial.println(buff);
    Serial.println(counter,DEC);
    if(buff[0] == 'S' && counter == 17){
          for(int i=0; i<16; i++) angle[i] = buff[i+1]*2;
      }
  }else{
      digitalWrite(LED, LOW);
      counter=0;
  }
  
  for(int i=0; i<16; i++) servo_write(i, angle[i]);
}
void servo_write(int ch, int ang){ //動かすサーボチャンネルと角度を指定
  ang = map(ang, 0, 180, SERVOMIN, SERVOMAX); //角度（0～180）をPWMのパルス幅（150～600）に変換
  pwm.setPWM(ch, 0, ang);
}

bloggerでの導入方法はデザイン画面を開きテーマ→HTMLの編集を選びます。

ここでブログのHTMLソースを編集できます。<head>直下に

以下コードを追加します。

<script src='https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=desert' type='text/javascript'/>

これだけでも動作しますが、スタイルをいじってもうちょっと見やすくしてみます。

テーマデザイナー→上級者向け―→CSSを編集

ここに以下コードを追加します。

    .prettyprint ol.linenums > li {
	list-style-type: decimal;	/*行数を1づつ表示*/
} 
 
pre.prettyprint {
	margin: 5x;
	margin-bottom:4rem; 
	padding: 10px; 
	padding-left:20px; 		/*行番号が隠れないように追記*/ 
	/*max-height: 300px;*/ /*縦サイズは記事毎に設定するため削除*/ 
	overflow: auto; 		/*横スクロールバー*/
	/*background-color: #f8f8f8;*/ /*背景を変えたいとき*/
	border-radius:4px;		/*かどをまるく*/
}

記事に載せる時は編集画面の一番左の鉛筆マークからHTMLビューを選択します。

コードを乗っけたいところに以下のように追記します。

<pre class="prettyprint lang-言語 linenums">
	載せたいコード
</pre>

"言語"は以下参照

"bsh", "c", "cc", "cpp", "cs", "csh", "cyc", "cv", "htm", "html", "java", "js", "m", "mxml", "perl", "pl", "pm", "py", "rb", "sh", "xhtml", "xml", "xsl".

このとき、不等号や＆があると、ソースコードと認識しうまくいかないため

これらを文字列として認識させる必要があります。こちらのサイトを使って

変換すればうまくいくと思います。

あとはHTMLビューと作成ビューを切り替えながら編集していくと比較的

簡単にできると思います。HTMLビューで編集するのは慣れていないと大変なので

私は作成ビューで一通り編集した後HTMLビューでソースコードを追加することに

しています。

見た目はこの記事のようになります。このスタイルはdesertテーマに少し手を

加える形で簡単に作っています。もう少しこだわりたい人はHTMLソースからテーマを

変えたり、CSSをいじるとブログにあったデザインになると思います。