highlightjs

8月9日にリリースされたhighlight.jsの最新版にてテキストエディタAtomのデフォルトテーマ「One Dark」が使えるようになりました。

Atomエディタと同じ見た目

one_dark2

Atomでデフォルトで設定されているテーマ「One Dark」と同じ見た目です。

one_light2

今までAtomを使っていて知らなかったのですが、白ベースのテーマもデフォルトで入ってるんですね。

Atomテーマを使うにはCSSとJSを変更しよう

<!-- Atom One Dark Theme CSS -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.6.0/styles/atom-one-dark.min.css">
<!-- Atom One Light Theme CSS -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.6.0/styles/atom-one-light.min.css">
<!-- JS -->
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.6.0/highlight.min.js"></script>

これまでhighlight.jsを使用していた方はCSSを上記のものに変更しましよう。また、JavaScriptも最新版のver9.6.0に合わせて読み込み先を変更するのが良いかと思います。

これからhighlight.jsを導入しようという方は以前書いたソースコードを綺麗に表示するJavaScriptライブラリ highlight.js を導入を参考にしてみてください。

この記事をシェアする

この記事と同じカテゴリーの記事

この記事を書いた人

naremo [ナレモ]はWebサービスやアプリ、カメラ、プログラミングについて紹介するブログです。