ホーム / Prism.js /

Prism.jsをBloggerに設定する

2021年3月28日日曜日

Blogger Prism.js

t f B! P L
BloggerでSyntaxHighlighterが使えなくなったような記事を色々とみました。
プログラミングネタの記事を書く際に、シンタックスハイライト出来ると見やすくなるので、他のものを探している中で良く見たものが以下の2つでした。
  1. Google Code Prettify
  2. Prism.js
Prism.jsの方が個人的には簡単（かつ多言語に対応）だったので、Prism.jsを設定してみました。
「Blogger.comにPrism.jsをCDNで導入する」でかなり詳しく書かれています。
手順通りに行っていくと簡単に設定出来ました。
テーマやプラグインのみ変更したので、以下に記載しておきます。

テーマは以下を選択しました。 プラグインは以下を選択しました。
以下は上記テーマ・プラグインを設定した状態の表示サンプルです。

★ 基本
  1. preタグで大枠を作成する。
  2. 行数を表示したい場合はpreタグのclass属性に「line-numbers」を指定する。
  3. preタグ内にcodeタグを作成し、class属性に「language-xxx」で対象言語を指定する。
    xxx部分に指定出来るlanguage値はココを参照してください。

★ Javaソース
  • codeタグのclass属性に「language-java」を設定する。
/**
 * Sampleクラス.

 */
public class Sample {

    /**
     * mainメソッド.

     * @param args コマンドライン引数
     */
    public static void main(String[] args) {

        try {
            // コメント
            System.out.println("Hello World.");
        } catch (Exception e) {
            // コメント
            e.printStackTrace();
        }
    }
}

★ Javaソース（14行目をハイライト）
  • codeタグのclass属性に「language-java」を設定する。
  • preタグのdata-line属性を追加し、「行数」を設定する。
/**
 * Sampleクラス.

 */
public class Sample {

    /**
     * mainメソッド.

     * @param args コマンドライン引数
     */
    public static void main(String[] args) {

        try {
            // コメント
            System.out.println("Hello World.");
        } catch (Exception e) {
            // コメント
            e.printStackTrace();
        }
    }
}

★ Javaソース（10-19行目をハイライト）
  • codeタグのclass属性に「language-java」を設定する。
  • preタグのdata-line属性を追加し、値に「開始行数-終了行数」を設定する。
/**
 * Sampleクラス.

 */
public class Sample {

    /**
     * mainメソッド.

     * @param args コマンドライン引数
     */
    public static void main(String[] args) {

        try {
            // コメント
            System.out.println("Hello World.");
        } catch (Exception e) {
            // コメント
            e.printStackTrace();
        }
    }
}

★ Javaソース（1-3,6-9,13,16行目をハイライト）
  • codeタグのclass属性に「language-java」を設定する。
  • preタグのdata-line属性を追加し、値に「開始行数-終了行数」または「行数」をカンマ区切りで設定する。
/**
 * Sampleクラス.

 */
public class Sample {

    /**
     * mainメソッド.

     * @param args コマンドライン引数
     */
    public static void main(String[] args) {

        try {
            // コメント
            System.out.println("Hello World.");
        } catch (Exception e) {
            // コメント
            e.printStackTrace();
        }
    }
}

★ ターミナル（rootユーザ）
  • preタグのclass属性に「command-line」を設定する。
  • preタグにdata-user属性を追加し値に「root」を設定する。
  • preタグにdata-host属性を追加し値に「ホスト名」を設定する。
  • codeタグのclass属性に「language-bash」を設定する。
pwd
/usr/home/chris/bin
ls -la
total 2
drwxr-xr-x   2 chris  chris     11 Jan 10 16:48 .
drwxr--r-x  45 chris  chris     92 Feb 14 11:10 ..
-rwxr-xr-x   1 chris  chris    444 Aug 25  2013 backup
-rwxr-xr-x   1 chris  chris    642 Jan 17 14:42 deploy

★ ターミナル（rootユーザ以外）
  • preタグのclass属性に「command-line」を設定する。
  • preタグにdata-user属性を追加し値に「ユーザ名」を設定する。
  • preタグにdata-host属性を追加し値に「ホスト名」を設定する。
  • codeタグのclass属性に「language-bash」を設定する。
pwd
/usr/home/chris/bin
ls -la
total 2
drwxr-xr-x   2 chris  chris     11 Jan 10 16:48 .
drwxr--r-x  45 chris  chris     92 Feb 14 11:10 ..
-rwxr-xr-x   1 chris  chris    444 Aug 25  2013 backup
-rwxr-xr-x   1 chris  chris    642 Jan 17 14:42 deploy

★ Windows（コマンドプロンプト、PowerShell）
  • preタグのclass属性に「command-line」を設定する。
  • preタグにdata-prompt属性を追加し値に「パス（またはPS パス）」を設定する。
  • codeタグのclass属性に「language-powershell」を設定する。

preタグのclass属性に「command-line」を設定、かつdata-prompt属性を追加し値に「パス（またはPS パス）」を設定する。

dir


    Directory: C:\Users\Chris


Mode                LastWriteTime     Length Name
----                -------------     ------ ----
d-r--        10/14/2015   5:06 PM            Contacts
d-r--        12/12/2015   1:47 PM            Desktop

QooQ