code prettifyをBloggerで使う調整

2020/06/23

code prettifyをBloggerで使う調整

Code prettifyをBloggerで使うのに、少し調整したのでメモ。

<head>と</head>の間にrun_prettify.jsを入れる際、CSSも書き込む。
こんな感じ。

<!-- Google code prettify start -->
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
<style type="text/css">

pre {
    border: 1px solid #cccccc !important;
    line-height: 1.5em;
    padding: 0.5em !important;
 white-space: pre-wrap ;
}
pre.prettyprint
{
    border: 1px solid #cccccc !important;
    line-height: 1.5em;
    padding: 0.5em !important;
    overflow: auto;
}

</style>
<!-- Google code prettify end -->

2021年2月13日追記

特定のところだけ設定を変えたいときは下記のようにstyleで設定する。下記の例は、右端での折返しをせずに、はみ出す場合はスクロールバーを表示させる際の例。

<pre class="prettyprint linenum:1" style="white-space: pre;">