フロントのエンド

Web開発をがんばりたいブログ

JavaScript

「highlight.js」ソースコードを綺麗に表示してくれる子

by:
16/08/31

いらんかなぁ、とか思いながらもソースぐらいしか魅せる場所がない当ブログなので、シンタックスハイライターと呼ばれているやつを導入しております。ソースもだいたいはコピペなんだけども。

なんとなくハイライトされてたら気持ちいいよね。というやつな。そういう感じでいい。自分のメモなのだから。

それが、

highlight.js

highlight.js パイセン。

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

CDN版が用意されているので、なにも考えなければ3行で実装完了の手軽さ。

Getting highlight.js

How to use highlight.js

そのほかにもdocumentを参照のパターンでいろいろと使えるようだけども、僕は言語を絞ってテーマに組み込んで使ってます。

見た目もこれでもかって種類から選べるので、迷いますね。そうでもないですね。

highlight.js demo

心置きなく遊べるdemo↑。

<header>
  <h1>hoge</h1>
  <h2>hogehoge</h2>
</header>

<div class="wrap">

  <div class="box">
    <ul id="hoge">
      <li class="fuga">1</li>
      <li class="fuga">2</li>
    </ul>
  </div>

</div>
.box {
  width:200px;
  height:100px;
  background:#d5d5d5;
  display: flex;
  justify-content: center;
  align-items: center;

  &:hover {
    cursor: pointer;
  }
}

WordPressでもマークダウンが使えるので、precode差し込むのも簡単だし、Gistを埋め込むのもそれはそれとして面倒なので、サクッとコードを乗せいたときはこれ、捗るよ。

でもほんとはGistにして資産増やしながらやっていかないとダメなんだよなぁ。

シンタックスハイライターならば、highlight.js一択かな、という感じです。

WordPressとかでもプラグインを使わずに、こいつをテーマに組み込んだ方が表示も速いし話がいろいろ早いです。

はい。

highlight.js

コメントを残す