Cocoonでは、highlight.js機能と併用することで、ソースコードのハイライト表示ができるようになっています。
ブロックエディターでソースコードを挿入する方法
Cocoonでブロックエディター（Gutenberg）のコードブロックを利用してソースコードをハイライト表示する方法の説明です。
wp-cocoon.com
2020.01.28
ただ、Cocoonデフォルトだと、基本的によく利用される言語しか登録していません。
ハイライトさせたい言語オプションがない！
という場合は、以下の方法でカスタマイズすることができます。
＼エックスサーバー開発のWordPressテーマ／
カスタマイズ方法
まずは、子テーマのfunctions.phpに以下のPHPコードを追記します。
//ソースコードブロックの「言語」オプションに追加
add_filter('get_block_editor_code_languages', function ($languages){
$languages = array(
array(
'value' => 'nohighlight',
'label' => __( 'ハイライト表示しない', THEME_NAME ),
),
array(
'value' => 'plaintext',
'label' => __( 'プレーンテキスト', THEME_NAME ),
),
array(
'value' => '1c',
'label' => __( '1C', THEME_NAME ),
),
array(
'value' => 'abnf',
'label' => __( 'ABNF', THEME_NAME ),
),
array(
'value' => 'accesslog',
'label' => __( 'Access logs', THEME_NAME ),
),
array(
'value' => 'ada',
'label' => __( 'Ada', THEME_NAME ),
),
array(
'value' => 'armasm',
'label' => __( 'ARM assembler', THEME_NAME ),
),
array(
'value' => 'avrasm',
'label' => __( 'AVR assembler', THEME_NAME ),
),
array(
'value' => 'actionscript',
'label' => __( 'ActionScript', THEME_NAME ),
),
array(
'value' => 'apache',
'label' => __( 'Apache', THEME_NAME ),
),
array(
'value' => 'applescript',
'label' => __( 'AppleScript', THEME_NAME ),
),
array(
'value' => 'asciidoc',
'label' => __( 'AsciiDoc', THEME_NAME ),
),
array(
'value' => 'aspectj',
'label' => __( 'AspectJ', THEME_NAME ),
),
array(
'value' => 'autohotkey',
'label' => __( 'AutoHotkey', THEME_NAME ),
),
array(
'value' => 'autoit',
'label' => __( 'AutoIt', THEME_NAME ),
),
array(
'value' => 'awk',
'label' => __( 'Awk', THEME_NAME ),
),
array(
'value' => 'axapta',
'label' => __( 'Axapta', THEME_NAME ),
),
array(
'value' => 'bash',
'label' => __( 'Bash', THEME_NAME ),
),
array(
'value' => 'basic',
'label' => __( 'Basic', THEME_NAME ),
),
array(
'value' => 'bnf',
'label' => __( 'BNF', THEME_NAME ),
),
array(
'value' => 'brainfuck',
'label' => __( 'Brainfuck', THEME_NAME ),
),
array(
'value' => 'cs',
'label' => __( 'C#', THEME_NAME ),
),
array(
'value' => 'cpp',
'label' => __( 'C++', THEME_NAME ),
),
array(
'value' => 'cal',
'label' => __( 'C/AL', THEME_NAME ),
),
array(
'value' => 'cos',
'label' => __( 'Cache Object Script', THEME_NAME ),
),
array(
'value' => 'cmake',
'label' => __( 'CMake', THEME_NAME ),
),
array(
'value' => 'coq',
'label' => __( 'Coq', THEME_NAME ),
),
array(
'value' => 'csp',
'label' => __( 'CSP', THEME_NAME ),
),
array(
'value' => 'css',
'label' => __( 'CSS', THEME_NAME ),
),
array(
'value' => 'capnproto',
'label' => __( 'Cap’n Proto', THEME_NAME ),
),
array(
'value' => 'clojure',
'label' => __( 'Clojure', THEME_NAME ),
),
array(
'value' => 'coffeescript',
'label' => __( 'CoffeeScript', THEME_NAME ),
),
array(
'value' => 'crmsh',
'label' => __( 'Crmsh', THEME_NAME ),
),
array(
'value' => 'crystal',
'label' => __( 'Crystal', THEME_NAME ),
),
array(
'value' => 'd',
'label' => __( 'D', THEME_NAME ),
),
array(
'value' => 'dns',
'label' => __( 'DNS Zone file', THEME_NAME ),
),
array(
'value' => 'dos',
'label' => __( 'DOS', THEME_NAME ),
),
array(
'value' => 'dart',
'label' => __( 'Dart', THEME_NAME ),
),
array(
'value' => 'delphi',
'label' => __( 'Delphi', THEME_NAME ),
),
array(
'value' => 'diff',
'label' => __( 'Diff', THEME_NAME ),
),
array(
'value' => 'django',
'label' => __( 'Django', THEME_NAME ),
),
array(
'value' => 'dockerfile',
'label' => __( 'Dockerfile', THEME_NAME ),
),
array(
'value' => 'dsconfig',
'label' => __( 'dsconfig', THEME_NAME ),
),
array(
'value' => 'dts',
'label' => __( 'DTS (Device Tree)', THEME_NAME ),
),
array(
'value' => 'dust',
'label' => __( 'Dust', THEME_NAME ),
),
array(
'value' => 'ebnf',
'label' => __( 'EBNF', THEME_NAME ),
),
array(
'value' => 'elixir',
'label' => __( 'Elixir', THEME_NAME ),
),
array(
'value' => 'elm',
'label' => __( 'Elm', THEME_NAME ),
),
array(
'value' => 'erlang',
'label' => __( 'Erlang', THEME_NAME ),
),
array(
'value' => 'excel',
'label' => __( 'Excel', THEME_NAME ),
),
array(
'value' => 'fsharp',
'label' => __( 'F#', THEME_NAME ),
),
array(
'value' => 'fix',
'label' => __( 'FIX', THEME_NAME ),
),
array(
'value' => 'fortran',
'label' => __( 'Fortran', THEME_NAME ),
),
array(
'value' => 'gcode',
'label' => __( 'G-Code', THEME_NAME ),
),
array(
'value' => 'gams',
'label' => __( 'Gams', THEME_NAME ),
),
array(
'value' => 'gauss',
'label' => __( 'GAUSS', THEME_NAME ),
),
array(
'value' => 'gherkin',
'label' => __( 'Gherkin', THEME_NAME ),
),
array(
'value' => 'go',
'label' => __( 'Go', THEME_NAME ),
),
array(
'value' => 'golo',
'label' => __( 'Golo', THEME_NAME ),
),
array(
'value' => 'gradle',
'label' => __( 'Gradle', THEME_NAME ),
),
array(
'value' => 'groovy',
'label' => __( 'Groovy', THEME_NAME ),
),
array(
'value' => 'html',
'label' => __( 'HTML', THEME_NAME ),
),
array(
'value' => 'http',
'label' => __( 'HTTP', THEME_NAME ),
),
array(
'value' => 'haml',
'label' => __( 'Haml', THEME_NAME ),
),
array(
'value' => 'handlebars',
'label' => __( 'Handlebars', THEME_NAME ),
),
array(
'value' => 'haskell',
'label' => __( 'Haskell', THEME_NAME ),
),
array(
'value' => 'haxe',
'label' => __( 'Haxe', THEME_NAME ),
),
array(
'value' => 'hy',
'label' => __( 'Hy', THEME_NAME ),
),
array(
'value' => 'ini',
'label' => __( 'Ini', THEME_NAME ),
),
array(
'value' => 'inform7',
'label' => __( 'Inform7', THEME_NAME ),
),
array(
'value' => 'irpf90',
'label' => __( 'IRPF90', THEME_NAME ),
),
array(
'value' => 'json',
'label' => __( 'JSON', THEME_NAME ),
),
array(
'value' => 'java',
'label' => __( 'Java', THEME_NAME ),
),
array(
'value' => 'javascript',
'label' => __( 'JavaScript', THEME_NAME ),
),
array(
'value' => 'leaf',
'label' => __( 'Leaf', THEME_NAME ),
),
array(
'value' => 'lasso',
'label' => __( 'Lasso', THEME_NAME ),
),
array(
'value' => 'less',
'label' => __( 'Less', THEME_NAME ),
),
array(
'value' => 'ldif',
'label' => __( 'LDIF', THEME_NAME ),
),
array(
'value' => 'lisp',
'label' => __( 'Lisp', THEME_NAME ),
),
array(
'value' => 'livecodeserver',
'label' => __( 'LiveCode Server', THEME_NAME ),
),
array(
'value' => 'livescript',
'label' => __( 'LiveScript', THEME_NAME ),
),
array(
'value' => 'lua',
'label' => __( 'Lua', THEME_NAME ),
),
array(
'value' => 'makefile',
'label' => __( 'Makefile', THEME_NAME ),
),
array(
'value' => 'markdown',
'label' => __( 'Markdown', THEME_NAME ),
),
array(
'value' => 'mathematica',
'label' => __( 'Mathematica', THEME_NAME ),
),
array(
'value' => 'matlab',
'label' => __( 'Matlab', THEME_NAME ),
),
array(
'value' => 'maxima',
'label' => __( 'Maxima', THEME_NAME ),
),
array(
'value' => 'mel',
'label' => __( 'Maya Embedded Language', THEME_NAME ),
),
array(
'value' => 'mercury',
'label' => __( 'Mercury', THEME_NAME ),
),
array(
'value' => 'mizar',
'label' => __( 'Mizar', THEME_NAME ),
),
array(
'value' => 'mojolicious',
'label' => __( 'Mojolicious', THEME_NAME ),
),
array(
'value' => 'monkey',
'label' => __( 'Monkey', THEME_NAME ),
),
array(
'value' => 'moonscript',
'label' => __( 'Moonscript', THEME_NAME ),
),
array(
'value' => 'n1ql',
'label' => __( 'N1QL', THEME_NAME ),
),
array(
'value' => 'nsis',
'label' => __( 'NSIS', THEME_NAME ),
),
array(
'value' => 'nginx',
'label' => __( 'Nginx', THEME_NAME ),
),
array(
'value' => 'nimrod',
'label' => __( 'Nimrod', THEME_NAME ),
),
array(
'value' => 'nix',
'label' => __( 'Nix', THEME_NAME ),
),
array(
'value' => 'ocaml',
'label' => __( 'OCaml', THEME_NAME ),
),
array(
'value' => 'objectivec',
'label' => __( 'Objective C', THEME_NAME ),
),
array(
'value' => 'glsl',
'label' => __( 'OpenGL Shading Language', THEME_NAME ),
),
array(
'value' => 'openscad',
'label' => __( 'OpenSCAD', THEME_NAME ),
),
array(
'value' => 'ruleslanguage',
'label' => __( 'Oracle Rules Language', THEME_NAME ),
),
array(
'value' => 'oxygene',
'label' => __( 'Oxygene', THEME_NAME ),
),
array(
'value' => 'pf',
'label' => __( 'PF', THEME_NAME ),
),
array(
'value' => 'php',
'label' => __( 'PHP', THEME_NAME ),
),
array(
'value' => 'parser3',
'label' => __( 'Parser3', THEME_NAME ),
),
array(
'value' => 'perl',
'label' => __( 'Perl', THEME_NAME ),
),
array(
'value' => 'pony',
'label' => __( 'Pony', THEME_NAME ),
),
array(
'value' => 'powershell',
'label' => __( 'PowerShell', THEME_NAME ),
),
array(
'value' => 'processing',
'label' => __( 'Processing', THEME_NAME ),
),
array(
'value' => 'prolog',
'label' => __( 'Prolog', THEME_NAME ),
),
array(
'value' => 'protobuf',
'label' => __( 'Protocol Buffers', THEME_NAME ),
),
array(
'value' => 'puppet',
'label' => __( 'Puppet', THEME_NAME ),
),
array(
'value' => 'python',
'label' => __( 'Python', THEME_NAME ),
),
array(
'value' => 'profile',
'label' => __( 'Python profiler results', THEME_NAME ),
),
array(
'value' => 'k',
'label' => __( 'Q', THEME_NAME ),
),
array(
'value' => 'qml',
'label' => __( 'QML', THEME_NAME ),
),
array(
'value' => 'r',
'label' => __( 'R', THEME_NAME ),
),
array(
'value' => 'rib',
'label' => __( 'RenderMan RIB', THEME_NAME ),
),
array(
'value' => 'rsl',
'label' => __( 'RenderMan RSL', THEME_NAME ),
),
array(
'value' => 'graph',
'label' => __( 'Roboconf', THEME_NAME ),
),
array(
'value' => 'ruby',
'label' => __( 'Ruby', THEME_NAME ),
),
array(
'value' => 'rust',
'label' => __( 'Rust', THEME_NAME ),
),
array(
'value' => 'scss',
'label' => __( 'SCSS', THEME_NAME ),
),
array(
'value' => 'sql',
'label' => __( 'SQL', THEME_NAME ),
),
array(
'value' => 'p21',
'label' => __( 'STEP Part 21', THEME_NAME ),
),
array(
'value' => 'scala',
'label' => __( 'Scala', THEME_NAME ),
),
array(
'value' => 'scheme',
'label' => __( 'Scheme', THEME_NAME ),
),
array(
'value' => 'scilab',
'label' => __( 'Scilab', THEME_NAME ),
),
array(
'value' => 'shell',
'label' => __( 'Shell', THEME_NAME ),
),
array(
'value' => 'smali',
'label' => __( 'Smali', THEME_NAME ),
),
array(
'value' => 'smalltalk',
'label' => __( 'Smalltalk', THEME_NAME ),
),
array(
'value' => 'stan',
'label' => __( 'Stan', THEME_NAME ),
),
array(
'value' => 'stata',
'label' => __( 'Stata', THEME_NAME ),
),
array(
'value' => 'stylus',
'label' => __( 'Stylus', THEME_NAME ),
),
array(
'value' => 'subunit',
'label' => __( 'SubUnit', THEME_NAME ),
),
array(
'value' => 'swift',
'label' => __( 'Swift', THEME_NAME ),
),
array(
'value' => 'tap',
'label' => __( 'Test Anything Protocol', THEME_NAME ),
),
array(
'value' => 'tcl',
'label' => __( 'Tcl', THEME_NAME ),
),
array(
'value' => 'tex',
'label' => __( 'TeX', THEME_NAME ),
),
array(
'value' => 'thrift',
'label' => __( 'Thrift', THEME_NAME ),
),
array(
'value' => 'tp',
'label' => __( 'TP', THEME_NAME ),
),
array(
'value' => 'twig',
'label' => __( 'Twig', THEME_NAME ),
),
array(
'value' => 'typescript',
'label' => __( 'TypeScript', THEME_NAME ),
),
array(
'value' => 'vbnet',
'label' => __( 'VB.Net', THEME_NAME ),
),
array(
'value' => 'vbscript',
'label' => __( 'VBScript', THEME_NAME ),
),
array(
'value' => 'vhdl',
'label' => __( 'VHDL', THEME_NAME ),
),
array(
'value' => 'vala',
'label' => __( 'Vala', THEME_NAME ),
),
array(
'value' => 'verilog',
'label' => __( 'Verilog', THEME_NAME ),
),
array(
'value' => 'vim',
'label' => __( 'Vim Script', THEME_NAME ),
),
array(
'value' => 'x86asm',
'label' => __( 'x86 Assembly', THEME_NAME ),
),
array(
'value' => 'xl',
'label' => __( 'XL', THEME_NAME ),
),
array(
'value' => 'xml',
'label' => __( 'XML', THEME_NAME ),
),
array(
'value' => 'xpath',
'label' => __( 'XQuery', THEME_NAME ),
),
array(
'value' => 'zephir',
'label' => __( 'Zephir', THEME_NAME ),
),
);
return $languages;
});
上記は、highlight.jsが対応している、ほぼすべての言語です。
valueにclass名が入っており、labelは言語名です。
上記から、必要なものだけを取り出して$languages配列として返すようにカスタマイズしてください。もしくは不要なものを削除するとか。
自分のよく利用する言語のみをget_block_editor_code_languagesフックの返り値として返せば、ドロップダウンから選択する時間も短縮できるので、多少なりとも効率化が図れます。
