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

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

スポンサーリンク

こんにちは!

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

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

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

シンタックスハイライトの決定版!超軽量でシンプルな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月時点

以下はPHPJavaScriptJSXのサンプルです。

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のダウンロード方法と設定方法についてはこちらの記事が参考になりました。
ありがとうございます。

スポンサーリンク

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

© 2021 エンジニア×ライフハック Powered by AFFINGER5