果報は寝て待て: 3月 2020

自分用のメモとしています。
とにかく簡単にブログ上のコード表示をハイライト化したい。
google-code-prettifyを使います。

１，　テーマ→ブログで使用中→→HTMLで編集をクリックして画面を切り替えます。
２，　<head>と</head>との間に、 <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script> を貼り付けます。
３，　通常の作成画面で投稿内容を編集します。
４，　作成からHTMLに切り替えて装飾したいコードの前の　</p>と<p>の間に　<pre class="prettyprint"> を貼り付けます。
５，　コードの後の</p>と<p>の間に　 </pre>　を貼り付けます。
６、　保存します。

ここからコードを表示します。

コードはここまで

黒い画面は見た目がかっこいいのでやってみました。
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js">
を削除して代わりに
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=desert"></script>
をコピペします。
すると黒い画面（テーマというらしい)に変わります。
ここからコードを表示します。

#include <Wire.h>
#include <LPS.h>

LPS ps;

void setup()
{

コードはここまで

行番号も表示させました。
<pre class="prettyprint"> を貼り付ける時、代わりに
<pre class="prettyprint　linenums"> を貼り付けます。
するとコードがシマシマになってしまいます。
さすがにこれは見ずらい。

このシマシマをなくそうと、テーマを色々変えてみたのですが、デフォルトのテーマ（白い画面）しかまともに表示できませんでした。
　desert, sunburst, doxy, sons-of-obsidian,
どれも同じでした。
行番号の表示が必要になったときに又考えることにします。

後日このシマシマが解決しました。
何度もやってるうちに間違って
<header>と</header>との間に、 <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script> が貼り付けてあったのです。
これを削除したらシマシマが消えて行番号が表示できるようになりました。

#include <Wire.h>
#include <LPS.h>

LPS ps;

void setup()
{

さらに横に長いコードをスクロールして表示できるようにします。

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

の後に

　 <style type='text/css'>
    pre.prettyprint {
      font-size:12px;
      overflow: auto;
    }
    pre.prettyprint.high {
      overflow: auto;
      height: 23em;
    }
    </style>

を貼り付けます。

果報は寝て待て

2020年3月20日金曜日

google-code-prettifyの使い方