コモンイベントのコードをワードプレスで綺麗に表示

ウディタのコードを綺麗に表示する方法。かなり苦労しました。

Crayon Syntax Highlighter

コードを表示するプラグインです。インストールします。

ウディタ用言語ファイルとCSSファイル

2016/03/22追記
入れ子にされた箇所のコードの色が反映されないミスを修正。

がんばって自作しました。ご自由にお使いください。ワードプレスじゃなくても、自分でCSSとかいじれる人ならクラスの色とかが参考になるかもしれないので、その場合でもご自由にお使いください。正規表現わかる人なら言語ファイル側も何かの参考になるかもですね。ファイルの中身は以下。

woditor.txt

ウディタのコードのどの行がどんなものかを定義する言語ファイル。
アドレス/wp-content/plugins/crayon-syntax-highlighter/langs/woditor
というフォルダを作成し、その中に入れてください。
修正したい場合は「正規表現」で記述するそうです。

woditor.css

色とかのCSS設定ファイル。実際のウディタの表示に合わせています。
アドレス/wp-content/plugins/crayon-syntax-highlighter/themes/woditor
というフォルダを作成し、その中に入れてください。

上記2ファイルはFTPソフトでアップロードします。

設定の仕方

設定→Crayonから、一番上にある【一般設定】のテーマのセレクトボックスから【Woditor】を選択。同じく中段ぐらいにある【プログラム言語】も【WOLF RPG Editor】を選択。

記述の仕方

ウディタのイベントを選択して右クリック。【コマンド文→クリップボードにコピー】をクリック。ワードプレスの投稿画面で、ビジュアルエディターなら【<>】のアイコンをクリック。テキストエディターなら【crayon】をクリック。【ここにコードを記述してください】にペースト。

こうなります(5-8行をマーク)

同じような表示になりました!ブラウザによってちょっと違うと思いますが。

苦労した点

  • 正規表現がなんなのか分からなかった。ぐぐった。
  • 言語ファイルが反映されなくて何時間もはまったが、文字コードをUTF-8にしたら反映された。
  • CSSはワードプレスのテーマ側に記述しようとしたが、CrayonのCSSに【!important】がついていたので反映されず、やむなく自作。
  • Crayonの設定がいっぱいあって迷った。サイドバーは見づらいので表示せず改行することにした。(一般設定→行の【Wrap lines by default】にチェック)

以上です。誰かの役に立てばいいな。

Tweet about this on TwitterShare on FacebookShare on Google+

コモンイベントのコードをワードプレスで綺麗に表示” に対して1件のコメントがあります。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です