2019年2月8日金曜日

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>

0 件のコメント:

コメントを投稿