ワードプレスでソースコードをきれいに表示する方法

Javaで元号を使う記事にソースコードを入れましたが、あまりイケていなかったです(笑)。ワードプレスのクラシックエディターで<code>タグを使っただけなので、固定幅フォントになっただけでした。

<code>タグだと、のっぺりした感じ

<code>タグだと、のっぺりした感じ

その記事

もっときれいに表示する方法はないかと調べてみたら、SyntaxHighlighter Evolvedというプラグインが見つかりました!!
一番上の、作者「Alex Mills (Viper007Bond)」のです。

SyntaxHighlighterで検索するとプラグインが見つかります

SyntaxHighlighterで検索するとプラグインが見つかります

さっそくインストールしてみます。

さっそくインストールしてみます。

有効化します。

有効化します。

<code>タグの変わりに、[code]タグを使います。language属性でプログラミング言語を指定します。

こんな感じ:

[code language='java']
ここにソースコードを入れる。
[/code]
SyntaxHighlighterのタグに変えるだけでこう!!

SyntaxHighlighterの[code]タグに変えるだけでこう!!

令和時代に合った、かっこいいソースコードになりましたね(笑)。
本当はエディターも新しいGutenbergにしないといけないのですが、それはまた今度。

ブログランキング、応援クリックお願いします!!m(_ _)m

にほんブログ村 海外生活ブログ アメリカ情報へ