とにかく簡単にブログ上のコード表示をハイライト化したい。
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>を貼り付けます。
0 件のコメント:
コメントを投稿