以前GitHub Gistを使ってブログにソースコードを美しく貼り付ける方法を試してみました。

GitHub Gistを使ってWordPressサイトにソースコードをキレイに表示する

しかし、毎回Gistを作成して、ブログへ貼り付けるのはやはり面倒です。

ちょっとしたソースを貼るときはWordPressのエディタに直接貼れた方がいいので、シンタックスハイライト用のプラグイン等を探すことにしました。

Prism.jsを使ってみる

今まではSyntaxHighlighterのようなプラグインがメジャーだった印象ですが、Prism.jsはJavaScriptファイルとCSSファイルを読み込むだけで使えるシンプルなものです。

今回はこれを試してみました。

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
class AppComponent implements OnInit {

  name = ''

  ngOnInit() {
  }
}

イケてる…!

使い方

  • Prism.jsのサイト(https://prismjs.com/download.html)でテーマや対応言語を選び、JSファイルとCSSファイルをダウンロードする。
  • WordPressの適当なディレクトリにアップロードする。
  • header.phpの中にあるheadタグ内にJSとCSSを読み込む記述をする。

これだけでした。容量も軽くて、シンプルで気に入りました!