Google code-prettifyによるBloggerでのコード埋め込み

2019 Jun. 30.
2019 May 02.
2019 Feb 08.

参照元
https://torina.top/detail/460/
http://labs.kamimoto.biz/javascript/google-code-prettify-linenums.html

・HTML編集モードで編集する。

・記述するタグ

• <script></script>　ページ先頭に記述
• <style></style> 　行番号・スクロールバー設定
• <pre class="prettyprint linenums"></pre>　本文記述 

・HTML構成

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script><style>
.prettyprint ol.linenums > li {
list-style-type: decimal;
}
pre.prettyprint {
white-space: pre;
overflow: auto;
}
</style>

<pre class="prettyprint linenums">
コンテンツ1
</pre>

<pre class="prettyprint linenums">
コンテンツ2
</pre>

・行番号表示

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

 <style>

.prettyprint ol.linenums > li {
  list-style-type: decimal;
}
</style>
<pre class="prettyprint linenums">
 YOUR CODE HERE
</pre>

・横スクロールバー

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

<style>
pre.prettyprint {
  white-space: pre;
  overflow: auto;
}
</style>
<pre class="prettyprint linenums">
 YOUR CODE HERE
</pre>