[ブログ][CSS] ブログのテーマ変更 and シンタックスハイライター prettify の導入

先日、2年ぶりくらい(?)にブログを更新して、せっかくなので気分を変えてブログテーマも変更してみた。このブログをご覧になってくださっている方が使いやすい・見やすいテーマを基準としながらも、部屋の模様替えと同じで、どんなブログだと良い気持ちか考えながら。とりあえず運用しつつ、必要に応じて修正を加えていくつもり。

連動して、これまで利用していた highlight.js というシンタックスハイライターから、code-prettify へと変更してみた。昨日の記事は、新しく導入した code-prettify を利用している。こちらも可愛いので気に入っている。

code-prettify の導入及び使用方法について、こちらのページがとてもわかりやすかった: Bloggerでソースコードをきれいに表示する方法 | まあうさブラザーズ

事前準備としては: Theme -> オレンジのCustomizeボタン右の三角をクリック -> Edit html -> </html>の直前にコードを挿入。このブログでは:

<script src='https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js'/>
<style type='text/css'>
pre.prettyprint.linenums li{
list-style-type: decimal;
} 

にしている。linenums の li 要素に対するCSSの記述の部分は、毎行に行数を表示するためのもの (デフォルトでは5の倍数行に行数が表示される)。各ブログ記事内においては:

<pre class="prettyprint linenums">
コードコードコード
</pre>

でOK。

[HTML] highlight.js でソースコードをハイライトする

highlight.js を使って、ソースコードをハイライトできるようにしてみた。

準備として、次のコードをhead内にコピペ。

<link rel="stylesheet"
      href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

準備完了。

後は、ハイライトしたいコードを、"pre" と "code" で囲むだけ。

print("hello world")

for i in range(0,10):
    print(i)

参考

• コードのハイライト表示用 JS ライブラリ highlight.js の使い方 (Qiita)

[ブログ] 過去記事をほんのり更新

過去記事をほんのり更新しました:

• [R] 単語の文字をバラバラ (かつ、元の形がなんとなくわかるよう) に並び替えるウェブ・アプリ
リンク先と利用法を明記。
• [本] 3月に買った本
いくつか追加。

[ブログ] 50エントリー!

前回の記事で、累計50エントリーになりました。

"You did it"

楽しみながら書いています。これからもよろしくお願い致します。

[ブログ] 部分的に更新しました (TreeTagger関連)

以前の記事に、ほんのりと加筆しました。TreeTagger関連です。

• [Mac] TreeTagger のインストールと設定
パスの通し方に関しての注意を書き加えました。
• [R] koRpus (TreeTagger の Rラッパー) で原形と品詞情報を得る
フルパスを手打ちで入力する代わりに、set.kRp.env(TT.cmd=file.choose(), lang="en") を使うと簡単。
• Useful Tools
TreeTagger を加えました。