@nifty ココログでアップロードしたソースリストを綺麗に見せる方法

記事にしておきたい内容を纏める際のソースリストが綺麗に掲載出来ないストレス、取り組んでいる電
子工作が壁に当たって進まない事、家事の忙しさ、その他いろいろとあって、なかなか記事が書けないでいた。

ソースリストが綺麗に掲載出来ないのは、僕のやり方がどこか間違っているのだろう。ネット上を調べたが、僕の悩みに対する書き込みは見当たらない。

それで、Arduinoで試した数行のソースリストを使って、この紙面上で試してみたいと思う。

Arduino IDE を起動して、下記のソースリストを綺麗に表示する方法をいろいろ試してみたい。
下記のSketchは、ESP32を使って、圧電ブザーを鳴らすもので、その際「SSD1306」に周波数を表示できるようにしてある。

500Hzから500Hz刻みで周波数を上げて圧電ブザーを鳴らします。
使っているESP32は、ESPRESSIF ESP32-WROOM-32 (技適対応済み)
A19というのは、D26ピン

#include "SSD1306.h"
const int ledPin = A19;
int freq;
int channel = 0;
int resolution = 8;
int dutyCycle = 125;
String Freq;
SSD1306 display(0x3c, 21, 22);

void setup() {
Serial.begin(115200);
display.init(); //SSD1306を初期化
ledcSetup(channel, freq, resolution);
ledcAttachPin(ledPin, channel);
}

void loop() {
for ( freq = 500; freq < 21000; freq = freq + 500) {
Serial.println(freq);
ledcWriteTone(channel, freq);
Freq = String(freq);
show_freq();
delay(1500);
}
}

void show_freq(){
display.clear();
display.setFont(ArialMT_Plain_16);
display.drawString(30, 20, Freq);
display.setFont(ArialMT_Plain_16);
display.drawString(75, 20," Hz");
display.display();
}

以上のソースリストを、次回のブログでは見やすく表示したい！

以下にやってみる

まず、記事投稿を書いているこの画面の右上の大きく太い黄色の枠どりされた中の右下にある「設定」をクリックする。

次の画面の基本情報をクリックして、中にある「ブログのサブタイトル（キャッチフレーズ）」の下の枠内に、下記（薄い緑色の背景のテキスト）を書き込む。
（コピーしてペーストすればいい）
この直ぐ下の行 ↓ から
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
<link rel="stylesheet" href="/css/prettify.css">
<style>
.prettyprint ol.linenums > li {
list-style-type: decimal;
}
</style>
↑ ここまでを枠内にコピーしたら保存して、記事投稿に移る。

通常エディタにして、ソースコード部分を、下記のようにして<pre>と</pre>で挟み込むようにする。

<pre><code class="prettyprint linenums">
ソースコード部分
</code></pre>

この方法で上記のソースリストを設定すれば、以下のように表示される。

#include "SSD1306.h" 
const int ledPin = A19;
int freq;
int channel = 0;
int resolution = 8;
int dutyCycle = 125;
String Freq;
SSD1306  display(0x3c, 21, 22);
void setup() {
  Serial.begin(115200);
  display.init(); //SSD1306を初期化
  ledcSetup(channel, freq, resolution);
  ledcAttachPin(ledPin, channel);
}
void loop() { 
  for ( freq = 500; freq < 21000; freq = freq + 500) {
    Serial.println(freq);
    ledcWriteTone(channel, freq);
    Freq = String(freq);
    show_freq();
    delay(1500);
  }
}
void show_freq(){
  display.clear();
  display.setFont(ArialMT_Plain_16);
  display.drawString(30, 20, Freq);
  display.setFont(ArialMT_Plain_16);
  display.drawString(75, 20," Hz");
  display.display();
}

表示の背景色を変更するには、前記２行目の
<script type="text/javascript" src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
を
<script type="text/javascript" src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sons-of-obsidian"></script>
等と変更すればよい。

skin= は、シンタックスハイライトのテーマ（skin）を指定するので、どのようなテーマがあるかは skin gallery を参照のこと。複数指定した場合は、読み込みに最初に成功したテーマが使われるとのこと。

ヘッダ部分は、一度設定しておけばいい筈なので、ソースリストを記載する際には、通常エディタにして
<pre><code class="prettyprint linenums">
ソースコード部分
</code></pre>
と書くように･･･と記憶しておけば良さそうだ。

上手く行ったようなので、既に記載したブログについても少しずつ表示を直してゆこうと思う。