目次: 自宅サーバー
今まで、コードのキーワードやコメントの文字色の変更を、手作業でやっていましたが、いつも間違えるし、何より面倒くさくてやってられません。
巷のハイライトライブラリを使って自動化だ!ということで、highlight.js(公式サイトは背景の小豆色が目に厳しい)を導入しました。
公式サイトのUsageリンクの先に説明があります。まずはダウンロードページから、highlight.jsとスタイルシート達をダウンロードします。
ダウンロードの際は、ハイライトしたい言語をチェックする必要があります。メジャーな言語には最初からチェックがついていますが、さらにハイライト対象にしたい言語があれば、追加でチェックを入れてください。
ダウンロードしたzipファイルを展開したら、自身のページに配置します。
以降の説明ではstyles内の *.cssをcss/highlightに置き、*.jsをscripts/highlightに配置した、と思って読んでください。
自身のページに、下記の三行を追加します。
<link rel="stylesheet" type="text/css" href="/css/highlight/vs.css">
<script type="text/javascript" src="/scripts/highlight/highlight.pack.js"></script>
<script type="text/javascript">hljs.initHighlightingOnLoad();</script>
CSSについては1つのテーマごとに1つのCSSファイルが作られていますから、お好きなテーマというかCSSを選んでください。
もちろんdefalut.cssを使っても、例に挙げたvs.css(VisualStudio風の色遣い)のままでも構わないです。この辺りは好き好きでどうぞ。
嬉しかったことは、特に言語を指定しなくても、それなりに推測して色を付けてくれることです。コードが短いと推測を間違うようですが、例え違う言語のハイライトだったとしても読み見やすさは格段にアップします。こりゃ便利です。
残念だったことは、行数表示がないことです。これは開発のポリシーによるもので、あえて実装していないし、するつもりもない(highlight.jsのドキュメントより)らしいので、そういうものだ、と思って諦めます。
< | 2014 | > | ||||
<< | < | 09 | > | >> | ||
日 | 月 | 火 | 水 | 木 | 金 | 土 |
- | 1 | 2 | 3 | 4 | 5 | 6 |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | - | - | - | - |
合計:
本日:
管理者: Katsuhiro Suzuki(katsuhiro( a t )katsuster.net)
This is Simple Diary 1.0
Copyright(C) Katsuhiro Suzuki 2006-2023.
Powered by PHP 8.2.20.
using GD 2.3.3(png support.)