highlight.jsをご紹介。

今日も一日暑かったですね〜・・ 金曜日は仕事休むぞい・・・(^q^)

ブログのネタをなかなか思いつかないですね。。ネタください!

本題

コードをホームページにのせるときに、ハイライトしたいときありますよね!? うちのホームページでもあんな風に綺麗にハイライトしたい!!

そんなとき、奥様これ!!

highlight.js

でもお高いんでしょう???

大丈夫、無料です^^(何故か通販風に・・・)

このブログにも組み込みたかったんですが、めんどくさくて、やってませんでした。 いつものことです・・・めんどくさいの最強かよ!

それでは使い方ですが。

1.ファイルを読み込む方式を決める。 CDN(コンテンツ・デリバリー・ネットワーク(Contents Delivery Network))またはファイルをダウンロードして、ファイルを読み込む。 CDNは外部のサーバーに置いてるファイルを指します。最近はこうやって、外部から読み込んだりするのもよくやるようですね。。 ダウンロードはこちらから。。

2.読み込む。 ファイルを設置しなくていい分、CDNを使用させていただくのがいいかと思います。 HTMLのHEADタグの中に書き込みます。WordPressの場合も同じで、テンプレートのヘッダーに書いとけばOKです。 ハイライトの色はsolarized-dark.min.cssのほかにも、いろいろあります。 種類はこちら→https://github.com/isagalaev/highlight.js/tree/master/src/stylesから名前のあとに.min.cssをつけると読み込めるようです。

↓オススメ設定です。

<link rel="stylesheet" href="http://cdn.jsdelivr.net/highlight.js/9.5.0/styles/solarized-dark.min.css">
<script src="http://cdn.jsdelivr.net/highlight.js/9.5.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

3.使う。 後は、使うのみ。コードを<pre><code></code></pre>で囲ったところに適用されます。

#include<stdio.h>
int main(void){
    printf("hello,world!!");
    return 0;
}

こんな感じで、綺麗にハイライトされます。 コードの種類をclassで指定することができます。指定すると、そのコードに合った色になるっぽい??です。 <pre><code class="C">←こんな感じでやります。

使える言語の種類は↓公式のこちらに・・・ http://highlightjs.readthedocs.io/en/latest/css-classes-reference.html#language-names-and-aliases

以上