highlight.jsを用いてソースコードを表示させる方法を備忘録代わりに記す。
STEP1. ソースコードを表示させるStyleの選択
highlight.js demoの左下部分からブログのスタイルを選ぶ。本ページのソースコードを表示し、以下のようにHTMLからcss名を確認する。
<link rel="alternate stylesheet" title="Github" href="styles/github.css">
STEP2. Bloggerテンプレートの更新
以下をテンプレートHTMLの<head></head>部分の中に埋め込む。
<link href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.2/styles/default.min.css" rel="stylesheet"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.2/highlight.min.js"></script>;
<script>hljs.initHighlightingOnLoad();</script>
STEP3. ソースコードの表示サイズの変更
BloggerテンプレートのカスタマイズからBloggerテンプレートデザイナーを開き、上級者向けから、cssの追加を選択する。
pre {
font-size : 12px
}
STEP4. ソースコードの埋め込み
最後に、投稿編集画面において、HTMLとしてソースコードを以下のタグで挟んで追加するだけである。
<pre><code>〜</pre></code>
また、言語の指定は以下のようにクラスを指定するだけで良い。
<pre><code class = "python">〜</pre></code>
例.pythonコードの場合
参考：
http://blog.ayihis.info/2014/12/highlightjsblogger.html
https://highlightjs.org/static/demo/
https://39life.net/highlightjs/
https://github.com/isagalaev/highlight.js/tree/master/src/styles
http://takachan.hatenablog.com/entry/2014/08/15/232154
http://www.blogger-customize.com/2013/11/css-customize.html
http://highlightjs.readthedocs.io/en/latest/index.html
<pre><code>〜</pre></code>
また、言語の指定は以下のようにクラスを指定するだけで良い。
<pre><code class = "python">〜</pre></code>
例.pythonコードの場合
if __name__ == '__main__':
ratio = 0.9
train_in = []
train_out = []
dev_in = []
dev_out = []
with open('../data/line_talk.in', mode = 'r') as fr:
for i,line in enumerate(fr):
if i < num_lines*ratio:
train_in.append(line)
elif i < num_lines:
dev_in.append(line)
参考：
http://blog.ayihis.info/2014/12/highlightjsblogger.html
https://highlightjs.org/static/demo/
https://39life.net/highlightjs/
https://github.com/isagalaev/highlight.js/tree/master/src/styles
http://takachan.hatenablog.com/entry/2014/08/15/232154
http://www.blogger-customize.com/2013/11/css-customize.html
http://highlightjs.readthedocs.io/en/latest/index.html
0 件のコメント:
コメントを投稿