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

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

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

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

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

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

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

スポンサーリンク

カスタマイズ方法

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

カスタマイズ
スポンサーリンク
わいひら

無料WordPressテーマ、Simplicity、Cocoonを作成。当サイトと寝ログを運営しています。

わいひらをフォローする
わいひらをフォローする
おすすめサーバー(コスパ・バックアップ重視型)

性能も兼ね備えながら安くブログ運営を開始できる点においてのNo.1。
それでいてブログ成長後は、十分すぎるほどのスペックアップ余力も担保されている。

◎安く始められる
◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:2年

1年以上の契約をする場合は、クーポンコード入力でさらに10%割引(※2020/12/31まで)。

クーポンコード:PK4JK4RJ

クーポンの使用方法はこちら

とにかく速い。サイトに表示スピードを求めるならココ。
管理画面がシンプルで使いやすい。

◎nginxを用いた高速サーバー(完全SSD)
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
○http/2(高速化プロトコル)に対応
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎サーバ引っ越しツールあり(無料)
○サーバ引っ越し依頼が可能(有料)
◎ドメインとサーバー代のチャージ払いが可能

サービス運営期間:1年10ヶ月

安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。

◎nginxを用いた高速サーバー(完全SSD)
◎老舗サーバーなので安定感抜群
◎ディスク容量が多い
◎転送量が多い
◎同サービス内でドメイン管理が可能
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
○DBは7日以内なら無料自動復旧可能
×ファイルは有料かつ手動での復旧
×プラン変更でCPUのスペックアップができない
×プラン変更しても即時反映されない
×アダルト・出会い系サイト不可

サービス運営期間:17年

常に新しいことに挑戦しているフロンティア精神あふるるレンタルサーバーです。
LiteSpeedやHTTP/2を日本で初めて導入したサーバー。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎ディスク容量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
○ファイルは14日以内なら無料復旧可能(※手動)
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:4年

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
ただし少し機能は弱い。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎激安プランが用意してある
◎値段あたりのスペックが高い(コスパ良し)
◎サーバ引っ越し依頼が可能(無料)
◎アダルト・出会い系サイト可
○http/2(高速化プロトコル)に対応
△プランのアップは可能だがダウンは不可
△毎日自動バックアップ(1日分)
△前日のバックアップからのみ復元できる(無料)

サービス運営期間:4年

Cocoon

コメント テーマの質問はフォーラムへ

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