プログラミング エンジニア全般

AFFINGER(アフィンガー)でコードブロックを使用したいなら、Prism.jsがおすすめ!!

スポンサーリンク

こんにちは!

今回はAFFINGER(アフィンガー)でコードブロックを記述したいときに使えるライブラリについて、お伝えしたいと思います。

AFFINGER(アフィンガー)でコードブロックを記述するにはPrism.jsがおすすめです!

AFFINGER(アフィンガー)ではPrism.jsがおすすめする理由

Prism.jsをおすすめする理由はいくつかあります。

AFFINGER(アフィンガー)デフォルトのコードブロックでは物足りないから

 コードブロック系のプラグインは使用できないものが多いため

Prism.jsは機能がとても充実しており、差別化を図れるため

AFFINGER(アフィンガー)デフォルトのコードブロックでは物足りないから

まず、デフォルトのコードブロック機能は少し物足りないです。(簡単なHTML を記述するには問題ないんですが...)

 html
<p>コードブロック</p>
 command
$ git status

ターミナルの方はいい感じですが、HTMLの方は色分けなどがなく、読者の方にとっては読みづらいと思います。

ハイライトや行番号の表示などはなさそうです。。

コードブロック系のプラグインは使用できないものが多いため

次に、コードブロック系のプラグインはいくつか使えません。

僕は「Highlighting Code Block」や「Crayon Syntax Highlighter」などのプラグインをインストールしてみましたが、エディター上に表示されず、使えませんでした。(クラシックエディター)

他のテーマだと、エディターから使用できることは確認しました。

 

Prism.jsはカスタマイズ性に優れており、差別化を図れるため

Prism.jsには優れた点がたくさんあります!

ポイント

・8つのカラーテーマ(Themes)

・200以上の言語対応

・26の機能(プラグイン)

※ 2020年9月時点

特にプラグインが非常に充実しています。

言語名を表示したり、
ワンクリックでコピーできたり、
コードブロック内でハイライトできたり。

デザインなどがお好きな方はワクワクすること間違いなしです!

 

Prism.jsのダウンロード方法と設定方法についてはこちらの記事が参考になりました。
ありがとうございます。

スポンサーリンク

-プログラミング, エンジニア全般
-

© 2020 エンジニア×モチベアップ Powered by AFFINGER5