【最新】Luxeritasでのソースコード表示
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;
}
}
というようにうまくハイライトがされなくなってしまいますので、言語設定は間違えないようにしてください。
以上でおしまいとなります。