2017.04.30 [日] SyntaxHighlighter4.0.1にアップデート
Webデザイン学科では、HTMLやCSS, JavaScriptなどコードを書くことも多く、このブログでも、しばしば紹介しています。
記事を書く時は、JavaScriptのライブラリSyntaxHighlighterを利用してソースコードをわかりやすく表示しています。
他にも、有名なhighlight.jsがあるのですが、HTMLのタグ“<”や“>”を実態参照に変更しなくてはいけなかったり、余分な改行が入ったりと少々使いづらいです。
SyntaxHighlighterのWebサイトでは、バージョンが3.0.83ですが、GitHubでは最新の4.0.1が公開されています。
3.0.83はダウンロードして必要なJavaScriptとCSSを読み込ませることで、手軽に利用できたのですが、4.0.1ではダウンロードしてから、ターミナルでアレコレして使えるようにします。
そうだ、ECMAScript6(ES2015)でいこうを書いた時に、ES6に少し対応しているとういう事だったので、4.0.1にアップデートしました。
GitHubからクローン
まずは、gitのバージョンを確認します。Macは、OS X El Capitan(10.11.6)です。$ git --version git version 2.10.1 (Apple Git-78)
もし、gitがインストールされていないようであれば、Gitのサイトからインストールしてください。
今回は、Desktopにダウンロードしますので、Desktopに移動して、GitHubからcloneします。
$ cd ~/Desktop $ git clone https://github.com/syntaxhighlighter/syntaxhighlighter.git Cloning into 'syntaxhighlighter'... remote: Counting objects: 3500, done. remote: Total 3500 (delta 0), reused 0 (delta 0), pack-reused 3500 Receiving objects: 100% (3500/3500), 5.94 MiB | 607.00 KiB/s, done. Resolving deltas: 100% (1762/1762), done.
ダウンロードが終わると、Desktopにsyntaxhighlighterフォルダができています。
このままでは、使えませんのでビルドします。詳しくは、syntaxhighlighterのドキュメントにも記載されています。
npmを利用しますので、インストールされているか確認します。
$ npm -v 4.5.0
インストールされていない場合は、公式サイトからNode.jsをインストールしてください。npmのバージョンは最新でなくても大丈夫だと思います。
syntaxhighlighterフォルダに移動して、npm installをします。
$ cd syntaxhighlighter $ npm install
なにやら色々とダウンロードし始めますので、1分ほど待ちます。
さらにbrushファイルとthemeファイルをsetupします。
$ ./node_modules/gulp/bin/gulp.js setup-project
brushとthemeデータがまた色々とreposフォルダにダウンロードされます。
これで、ビルドする準備ができました。
syntaxhighlighterをビルド
必要なプログラミングのbrushとthemeを決めます。
種類は何があるかは、GitHubを見てください。
brushは、絶対使わなさそうなプログラム言語もありますが、一応all(全部)でいいかなと思います。
themeは、RDarkを選びました。どんな表示なのかは、v3.0.83のサイトから確認できます。
では、optionでbrushとthemeを選択してビルドします。
$ ./node_modules/gulp/bin/gulp.js build --brushes=all --theme=rdark … Finished 'build' after 1.66 s
2秒弱でビルドが完了(Finished)すると、syntaxhighlighter内のdistフォルダ内にJavaScriptファイルとhtml, cssが追加されています。
index.htmlには、サンプルコードと表示例が入ります。
この、syntaxhighlighter.jsとtheme.cssを読み込んで、HighLightしたいコードのclassをaliasesに設定すれば、反映されます。
brushも自作することができるようです。
linuxBean14.04(123)SyntaxHighlighter v4のブラシを作成する
- 関連記事
-
- 手軽に目次機能を導入できる「TOC」がダウンロードできなかったので。 (2017/11/11)
- ターミナルを学校のProxy環境で使う時の設定 (2017/05/05)
- SyntaxHighlighter4.0.1にアップデート (2017/04/30)
- ScrollMagicでアニメーション (2015/09/25)
- ScrollMagicを調べた。 (2015/08/29)
- WordPressでCrayon Syntax Highlighterプラグイン (2015/06/09)
- canvas要素でパーティクル vol.2 (2015/04/18)
- canvas要素でパーティクル vol.1 (2015/04/16)
- 特別授業「CSS3 Animation」 (2014/09/02)
- 忘れていた「Google Web Designer」を起動してみた。 (2014/03/22)