1. ホーム
  2. Web プログラミング
  3. ウェブ編集者

SyntaxHighlighterに新しい言語を追加するための方法

2022-01-17 17:43:17
というのも、私のブログではLuaのコードを掲載することが多いのですが、私が使っているSyntaxHighlighterプラグインはデフォルトではLuaに対応していないので、SyntaxHighlighterに新しい言語を追加して有効にする方法を調べたので、同じニーズを持つ他の子たちとここでそのプロセスを共有しようと思います。(Luaを追加したので、以下の手順の説明は例としてLuaで行います。必要な言語を追加する場合は、該当する項目を自分のカスタム設定に置き換えるだけです)
1. このブログから目的の言語を検索します。 http://www.undermyhat.org/blog/2009/09/list-of-brushes-syntaxhighligher/ ;.
2. 対応するshBrushXXX.jsスクリプトをダウンロードします。例えば、私はshBrushLua.jsをダウンロードしましたが、これは次のようなスクリプトです。

コピーコード コードは以下の通りです。

SyntaxHighlighter.brushes.Lua = function()
{
 var keywords = 'break do end else elseif function if local nil not or repeat return and then until while this';
 var funcs = 'math\\. \\w+ string\\\. \\\w+ os\\. \\w+ debug\\\. \\w+ io\\\. \\\w+ error fopen dofile coroutine\\\. \\\w+ arg getmetatable ipairs loadfile loadlib loadstring longjmp print rawget rawset seek setmetatable assert tonumber tostring';

 this.regexList = [
  { regex: new RegExp('--\\[\\[[\\s\\\S]*\\\]\\\]--', 'gm'), css: 'comments' },
  { regex: new RegExp('--[^\\[]{2}. *$', 'gm'), css: 'comments' }, // one line comments
  { regex: SyntaxHighlighter.regexLib.doubleQuotedString, css: 'string' }, // strings
  { regex: SyntaxHighlighter.regexLib.singleQuotedString, css: 'string' }, // strings
  { regex: new RegExp(this.getKeywords(keywords), 'gm'), css: 'keyword' }, // keyword
  { regex: new RegExp(this.getKeywords(funcs), 'gm'), css: 'func' }, // functions
  ];
}

SyntaxHighlighter.brushes.Lua.prototype = new SyntaxHighlighter.Highlighter();
SyntaxHighlighter.brushes.Lua.aliases = ['lua'];

3. FTPツールを使ってWordPressスペースにログインし、wp-content/pluginsディレクトリに移動し、syntaxhighlighter-luaのような意味のある名前で新しいディレクトリを作成します。
4. 新しく作成したディレクトリに、shBrushLua.jsをアップロードします。
5. そのディレクトリに別途shBrushLua.phpファイルを作成し、以下を追加します。

コピーコード コードは以下の通りです。

<?php
/*
Plugin Name: SyntaxHighlighter Evolved: Lua
Description: Adds support for the Lua language to the SyntaxHighlighter Evolved plugin.
Author: Benny
Version: 1.0.0
*/
// SyntaxHighlighter Evolved doesn't do anything until early in the "init" hook, so best to wait until after that
add_action( 'init', 'syntaxhighlighter_lua_regscript' );
// Tell SyntaxHighlighter Evolved about this new language/brush
add_filter( 'syntaxhighlighter_brushes', 'syntaxhighlighter_lua_addlang' );
// Register the brush file with WordPress
function syntaxhighlighter_lua_regscript() {
    wp_register_script( 'syntaxhighlighter-brush-lua', plugins_url( 'shBrushLua.js', __FILE__ ), array('syntaxhighlighter-core'), '1.1.1' );
}
// Filter SyntaxHighlighter Evolved's language array
function syntaxhighlighter_lua_addlang( $brushes ) {
    $brushes['lua'] = 'lua';
    return $brushes;
}
? >

6. ファイルの準備ができたら、WordPressのバックエンドの「プラグイン」で、新たにsyntaxhighlighter-luaという項目が追加されているので、それを有効化します。

これで動くはずです!

実は、新しく追加したjsファイルやphpファイルは、SyntaxHighlighterプラグイン専用のディレクトリに置くこともできますが、プラグインとして独立させておくと、SyntaxHighlighterがバージョンアップしたときに、個人の設定が上書きされて失われることがない、というメリットがあるんですね。