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

こんにちは！

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

調べた結果、AFFINGER（アフィンガー）でコードブロックを記述するにはPrism.jsがおすすめです！

こちらの公式サイトからダウンロードできます。

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

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

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

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

 html
<p>コードブロック</p>

 command
$ git status

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

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

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

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

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

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

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

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

以下はPHPとJavaScript、JSXのサンプルです。

PHP

<?php
$a="Hello"; $b="world"; echo "$a, $b"; // Hello, world 
?>

JavaScript

// js
alert('Hello World');

JSX

// jsx
import React, {useState} from 'react';
import {Text} from 'react-native';

export default function Screen() {
  const text = 'Hello World!!';
  return (
    {text}
  );
}

見やすくないですか？？笑

個人的にはめっちゃ気に入ってます！！

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

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

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

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