【最新】Luxeritasでのソースコード表示

2020年1月23日

luxeritasテーマを使ったWordPressで記事内でソースコードを表示しようとした際に色々とハマったので説明します。

ちなみにソースコード表示をしようと思い、"luxeritas"、"ソースコード"といったキーワードで検索すると、ショートコードを使った方法が表示されますが、最初にお伝えしておくとショートコードを使った方法では対応できません。

よくよく調べてみるとブロックエディタ対応前のWordPress/luxeritasだとショートコードを使って対応可能だったようですが、ブロックエディタ対応後のWordPress/luxeritasでは使えなくなっているというのが理由のようでした。

前提

前述の通りWordPress/luxeritasそれぞれがブロックエディタに対応している必要があります。

具体的にはWordPress Ver5.0以降。luxeritas Ver3.6.2以降となります。

ソースコード表示手順

ブロックエディタでシンタックスハイライターを選択します。

なお、シンタックスハイライターはソースコードの構文をハイライト表示する機能です。

次にソースコードの言語を選択します。

選択可能なソースコードとしては

ApacheConfig
ASP.NET
autoHotkey
Bash
Basic
C
C#
Clike
CSS
Diff
Git
HTML/XHTML
java
javascript
JSON
nginx
Nim
Perl
PHP
PL/SQL
PowerShell
Python
R
Ruby
Rust
Sass
SQL
VB.NET
Vim

と十分すぎるほど定義されています。

ちなみにjavaのソースコードをシンタックスハイライターで表示すると、以下のように予約語などがハイライト表示されます。

package com.example.demo;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.servlet.ModelAndView;
@Controller
public class HelloWorldController {
    @RequestMapping(value="/", method=RequestMethod.GET)
    public ModelAndView index(ModelAndView mv) {
        mv.setViewName("index");
        return mv;
    }
    @RequestMapping(value="/result", method=RequestMethod.POST)
    public ModelAndView send(@RequestParam("inputvalue")String inputvalue, ModelAndView mv) {
        mv.setViewName("result");
        mv.addObject("message", inputvalue);
        return mv;
    }
}

同じソースコードでシンタックスハイライターの言語設定をHTML/XHTMLにしてみると

package com.example.demo;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.servlet.ModelAndView;
@Controller
public class HelloWorldController {
    @RequestMapping(value="/", method=RequestMethod.GET)
    public ModelAndView index(ModelAndView mv) {
        mv.setViewName("index");
        return mv;
    }
    @RequestMapping(value="/result", method=RequestMethod.POST)
    public ModelAndView send(@RequestParam("inputvalue")String inputvalue, ModelAndView mv) {
        mv.setViewName("result");
        mv.addObject("message", inputvalue);
        return mv;
    }
}

というようにうまくハイライトがされなくなってしまいますので、言語設定は間違えないようにしてください。

以上でおしまいとなります。