ソースコードブロックの「言語」オプションで利用できる言語を指定する方法

カスタマイズ
この記事は約27分で読めます。

Cocoonでは、highlight.js機能と併用することで、ソースコードのハイライト表示ができるようになっています。

ブロックエディターでソースコードを挿入する方法
Cocoonでブロックエディター(Gutenberg)のコードブロックを利用してソースコードをハイライト表示する方法の説明です。

ただ、Cocoonデフォルトだと、基本的によく利用される言語しか登録していません。

ハイライトさせたい言語オプションがない!

という場合は、以下の方法でカスタマイズすることができます。

\エックスサーバー開発のWordPressテーマ/
エックスサーバー開発の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フックの返り値として返せば、ドロップダウンから選択する時間も短縮できるので、多少なりとも効率化が図れます。

タイトルとURLをコピーしました