[WordPress]新しいコード表示プラグイン

WordPress での Swift ソースコード表示プラグインを切り替えてみます。

ソースコード表示プラグイン

このサイトでは、ソースコード表示に Crayon Syntax Highlighter を使っていたのですが、たまに シンタックスハイライトが正常に行われないのが気になってました。

調べてみようと確認してみたところ、なんと 5 年くらい更新されていないプラグインでした。

ということで、新しいプラグインに切り替えて試してみます。

コード表示の要件

おそらく以下のプログラミング言語に対応していれば十分です。

  • Swift
  • Python
  • Shell
  • Objective-C/C/C++

あとは、コードのコピーが簡単にできるようになっていれば、より便利 くらいでしょうか。

上記の要件で探してみても 非常にたくさんあるのですが、まずは使ってみようということで1つ選んでみました。

Highlighting Code Block plugin

Highlighting Code Block という plugin を使ってみることにします。

Highlighting Code Block plugin のインストール

WordPress のダッシュボードから、"Highlighting Code Block" で検索してインストールするだけです。

Highlighting Code Block plugin の使い方

Gutenberg (グラフィカルに記事を編集できるエディタ)に対応しているらしく、Gutenberg での使い方は見つかるのですが、普通のテキストエディタでの
使い方は見つからなかったので、メモ。

タグ

コードをラップするタグは、少し長め。以下は、Swift コードを表示するためのコード



// Swift code here
struct MyStruct {
  var newVar:Int
}
</code></pre></div>

# 一部タグの<を全角文字にしてます。

言語が異なる時に変更する箇所 2箇所

言語が異なる時に、変更すべき箇所は2箇所あります。


上記の lang-swift と Swift の箇所。

Prism というライブラリを使って、シンタックスハイライティングをしているためだと思われます。

  • Swift -> lang-swift , Swift
  • HTML -> lang-html, HTML
  • Objective-C -> lang-objectivec, Objective-C
  • Python -> lang-python, Python

表示例

先日使った、UnitTest のサンプルコードは、以下のような表示になります。


final class PomodoroModelTimerTest: XCTestCase {
    func test_worktimerElapsed_workTimer_Elapsed() throws{
        let fakeTimer = FakeDateProvider()
        fakeTimer.timeInterval = 0
 
        let sut = PomodoroModel(fakeTimer)
 
        // start timer
        sut.beginTimer()
 
        // time is not fired yet
        myTimer.timeInterval = 60*25 - 1       // (1)
        XCTAssertFalse(sut.updateProgress())   // (2)
        
        // 25 min should trigger
        myTimer.timeInterval = 60*25           // (3)
        XCTAssertTrue(sut.updateProgress())    // (4)
    }

説明は以上です。
不明な点やおかしな点ありましたら、こちらまで。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です