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

以上

1 件のコメント

コメントを書いてみる

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です