2020年7月17日金曜日

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

どうもcaketetuです。
私はブログにプログラムコードを載せる時、短いコードは直接記載、長いコードは
google driveからリンクを貼って表示していました。しかし見栄えが悲惨な状況
だったので、今回はちょっとだけ見やすくしてみようと思います。

私は組み込み系はそこそこですが、WEB系はイマイチのため本記事は
以下のような人たち向けになるかと思います。
  • ちょっと見栄えを良くできればいい人
  • HTMLやCSSはあんまりいじりたくない人
  • 外部のサーバやソフトを使いたくない人




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

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() {
//サンプルソース 16chすべてのチャンネルより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をいじるとブログにあったデザインになると思います。





2、長いコードをファイルごと載せる時

 googleドライブに共有可能なフォルダを作りその中にコードを入れ
 googleドキュメントで編集します。

 googleドキュメントのアドオン→アドオンを取得からcode blockを導入します。



あとは言語、テーマを選びコードをすべて選択してformatするだけです。
私はxcodeがいいんじゃないかな~と思います。





編集が終わったら右上の共有からリンクを取得します。これをブログに
貼り付けます。
これで長いコードもブログを圧迫することなくきれいに見せることができます。





ちょっとひと手間ですが、劇的に見やすくすることができたと思います。私は
作ること中心で記事の体裁にはあんまり時間をかけたくないのでこれぐらいが
ちょうどいいですね。

参考にさせて頂いたサイト


0 件のコメント:

コメントを投稿