(15) 【MQL5】 SyntaxHighlighterでソースコードを装飾表示

投稿者: | 2017年9月18日

(1) やりたいこと

ブログ上に掲載したプログラムソースコードをコピペしたい機会は多々ある。

しかし、ここまでのブログ投稿ではエディタのキャプチャ画像を貼り付けていた。
なぜならば、MQLエディタではキーワードやデータ型の色を変えて強調表示してくれていて見やすいから。

自分が所有している他の WORDPRESSブログでは、この目的で SyntaxHighlighter Evolved というプラグインを使用している。今日時点の最新版 ver.3.2.1では 26言語に対応しているが、残念ながらMQLには未対応だ。

そこで…
SyntaxHighlighterプラグインをMQL5対応させ、MQL5コードをテキストとしてブログに装飾表示できるようにしたい。

(2) 作業手順

SyntaxHighlighterプラグインは PHPと JavaScriptで書かれているので中身を解析可能だ。
今回は MQLと言語仕様が似ている CPP用の記述をコピペしてMQL5に対応させる方針とする。

1. syntaxhighlighter.phpの変更

WORDPRESSインストールディレクトリ配下にある以下のファイルを編集する。
wp-content/plugins/syntaxhighlighter/syntaxhighlighter.php

まずは、WORDPRESS frameworkへの JavaScriptファイルロード指示を記述する。
今回新規作成するMQL5用のキーワード定義ファイルをロードしてもらうためだ。

wp_register_script( 'syntaxhighlighter-brush-mql',
    plugins_url( 'third-party-brushes/shBrushMql.js', __FILE__ ),
    array('syntaxhighlighter-core'), '20170917' );

次に、WORDPRESSのショートコードを登録する。
ブログ投稿文中で [mql][/mql] と書いた部分を SyntaxHighlighterに装飾してもらうようにするためだ。

$this->brushes = (array) apply_filters( 'syntaxhighlighter_brushes', array(
    'mql' => 'mql',

因みに上記の装飾された PHPコードは SyntaxHighlighterで表示している。

2. shBrushMql.jsの新規作成

WORDPRESSインストールディレクトリ配下にある以下のディレクトリに当該ファイルを作成する。
wp-content/plugins/syntaxhighlighter/third-party-brushes/

ベースはC++言語用の shBrushCpp.js を使うことにする。
このファイルをコピーして shBrushMql.jsに変更し、MQL5で装飾対象となるキーワード名や関数名などを記述する。

例えば以下のように書く。

var functions =	'OnInit OnDeinit OnTick';

また、以下の 2行も書き換える。

Brush.aliases	= ['mql'];
SyntaxHighlighter.brushes.Mql = Brush;

(3) いざ表示

こんな感じで表示できるようになった。
これならブログ投稿文から好きなところをコピペして再利用できる。

//+------------------------------------------------------------------+
//|                                                       Simple.mq5 |
//|                                                       DOGROW.NET |
//|                                       https://www.dogrow.net/fx/ |
//+------------------------------------------------------------------+
#property copyright "DOGROW.NET"
#property link      "https://www.dogrow.net/fx/"
#property version   "1.00"

#include "MyEA_MA.mqh";

input int      MaxPositionNum=1;
input int      IndParam1=12;

CMyEA* cMyEA;
#define D_MAGIC 201709161

//+------------------------------------------------------------------+
//| Expert initialization function                                   |
//+------------------------------------------------------------------+
int OnInit(){
   cMyEA = new CMyEA_MA(D_MAGIC, IndParam1);
   cMyEA.set_nmax_position(MaxPositionNum);
   if(false == cMyEA.Proc_OnInit()){
      return(INIT_FAILED);
   }   
   return(INIT_SUCCEEDED);
}
//+------------------------------------------------------------------+
//| Expert deinitialization function                                 |
//+------------------------------------------------------------------+
void OnDeinit(const int reason){
}
//+------------------------------------------------------------------+
//| Expert tick function                                             |
//+------------------------------------------------------------------+
void OnTick(){
   MqlTick tick;
   if(true == SymbolInfoTick(_Symbol, tick)){
      cMyEA.Proc_OnTick();
   }
}

カスタマイズ#1 : 任意の行番号から表示できる。

この SyntaxHighlighterで気に入っている点は、先頭行の行番号を指定できること。
これにより違和感なくプログラムの一部分だけを抜き出して表示できる。
例えば [mql firstline="18"] と書くと以下のように表示される。便利だ。

//+------------------------------------------------------------------+
//| Expert initialization function                                   |
//+------------------------------------------------------------------+
int OnInit(){
   cMyEA = new CMyEA_MA(D_MAGIC, IndParam1);
   cMyEA.set_nmax_position(MaxPositionNum);
   if(false == cMyEA.Proc_OnInit()){
      return(INIT_FAILED);
   }   
   return(INIT_SUCCEEDED);
}

カスタマイズ#2 : 行番号の表示を消せる。

行番号が不要な場合は消すこともできる。
例えば [mql gutter="false"] と書くと以下のように表示される。

//+------------------------------------------------------------------+
//| Expert initialization function                                   |
//+------------------------------------------------------------------+
int OnInit(){
   cMyEA = new CMyEA_MA(D_MAGIC, IndParam1);
   cMyEA.set_nmax_position(MaxPositionNum);
   if(false == cMyEA.Proc_OnInit()){
      return(INIT_FAILED);
   }   
   return(INIT_SUCCEEDED);
}

カスタマイズ#3 : 指定行をハイライトできる。

特定の行をハイライト(=強調表示)することもできる。
例えば [mql highlight="22,25"] と書くと以下のように表示される。

//+------------------------------------------------------------------+
//| Expert initialization function                                   |
//+------------------------------------------------------------------+
int OnInit(){
   cMyEA = new CMyEA_MA(D_MAGIC, IndParam1);
   cMyEA.set_nmax_position(MaxPositionNum);
   if(false == cMyEA.Proc_OnInit()){
      return(INIT_FAILED);
   }   
   return(INIT_SUCCEEDED);
}

所感

・とっても便利だ! 近いうちに過去の投稿文のキャプチャ画像をこれに置き換えよう。
・プラグインがアップデートされると変更分が消えてしまう… その都度編集が必要だ。


カテゴリー: MQL

コメントを残す

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


日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)