https://github.com/googlearchive/code-prettify
<head> ... </head> の間に以下を追記する
<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script>
HTML編集モードにして
<pre class="prettyprint">
...
...
</pre>
で挟んでコード記述する
上のままではコード欄の行番号が表示されない
<pre class="prettyprint linenums"> と書けば表示される
<pre class="prettyprint lang-html">
The lang-* class specifies the language file extensions.
File extensions supported by default include:
"bsh", "c", "cc", "cpp", "cs", "csh", "cyc", "cv", "htm", "html", "java",
"js", "m", "mxml", "perl", "pl", "pm", "py", "rb", "sh", "xhtml", "xml",
"xsl".
</pre>
公式のスキンはあるがイマイチだったので
https://jmblog.github.io/color-themes-for-google-code-prettify/ を見て
Atelier lakeside Lightにする
左カラムのテーマタブを選択して、カスタマイズをクリック、
左上カラムで上級者向けタブを選択、CSS追加を選択、
コピペしてきたカスタムCSSを追加、ブログに適用を押す
気に入らなくて他のに変えたい場合は、上で設定したCSSをいったん削除する。
左カラムのテーマタブを選択して、HTMLの編集をクリック、
<b:skin> ... </b:skin> の中に追加したCSSがあるのでこれ削ってテーマを保存して、改めて追加しなおす
Google Code Prettifyその後
以下に差し替えた<script src='https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sunburst'/>
Google Code Prettifyでソースコードを読みやすくする
デフォルトでは、１行ごとに行番号が表示されないので、１行ごとに番号を表示されたい場合はCSSで下記のように指定します
.prettyprint ol.linenums > li {
list-style-type: decimal;
}
文章中にhtmlタグなどを記述する
1. 文章中に1行だけコードを挟む場合
HTMLの編集モードで、以下のように <code> タグを使うと、コードっぽく表示されます
「Pythonで現在の日時を取得するには、<code>datetime.now()</code> を使います」
2. 複数行のコードを書く場合
複数行のコードを書く場合、<pre> タグと <code> タグを組み合わせると、適切にフォーマットされます。
<pre><code>
import datetime
now = datetime.datetime.now()
print(now)
</code></pre>
特殊文字を書き換える必要がある
https://www.peko-step.com/tool/escphtml.html
0 件のコメント:
コメントを投稿