Highlighting Code BlockとSyntaxHighlighter Evolvedの比較とSHEの不具合解消の方法

先日の記事でWordpressにアップデートして「 WP SyntaxHighlighter 」が使えなくなったのでその代わりになるプラグイン「Highlighting Code Block」を導入したのですが、「SyntaxHighlighter Evolved」が使いやすいという情報があったので比較してみました

Highlighting Code Block
https://wordpress.org/plugins/highlighting-code-block/
[blogcard url="https://wordpress.org/plugins/highlighting-code-block/"]

SyntaxHighlighter Evolved
https://ja.wordpress.org/plugins/syntaxhighlighter/
[blogcard url="https://ja.wordpress.org/plugins/syntaxhighlighter/"]

Highlighting Code Blockでの表示です。

//単純二値化処理
extern "C" void WINAPI glThreshold(
			LPINT image_in,					//入力画像配列
			LPINT image_out,				//出力画像配列
			int xw,							//画像の横幅
			int yw,							//画像の縦幅
			int thresh,						//閾値
			int mode						//閾値処理の方法(1：明るい方が白,2：明るい方が黒)
		  )
{
	LPINT image_buf;
	int		i, j ;
	
	 // 入力と結果が同じ画像の場合、テンポラリ領域を利用する //
    if(image_in == image_out ) {
		if((image_buf = (LPINT)malloc(sizeof(int) * xw * yw)) == NULL) return;
    } else {
		image_buf = image_out;
    }
	memset( image_buf, 0, sizeof(int) * xw * yw) ;
	
	for( i = 0 ; i < xw ; i++ ){
		for( j = 0 ; j <yw ; j++ ){
			switch( mode ){
				case 2 :
					if( *(image_in+i*yw+j) < 0 )			*(image_buf+i*yw+j) =  LOW ;
					else if( *(image_in+i*yw+j) <= thresh )	*(image_buf+i*yw+j) = HIGH ;
					else									*(image_buf+i*yw+j) =  LOW ;
					break ;
				default:
					if( *(image_in+i*yw+j) < 0 )			*(image_buf+i*yw+j) = HIGH ;
					else if(*(image_in+i*yw+j) >= thresh )	*(image_buf+i*yw+j) = HIGH ;
					else									*(image_buf+i*yw+j) =  LOW ;
					break ;
			}
		}
	}

	if(image_in == image_out) {
		memcpy(image_out, image_buf, sizeof(int)* xw * yw);
		free(image_buf);
    }
}

SyntaxHighlighter Evolved での表示です。

//単純二値化処理
extern "C" void WINAPI glThreshold(
			LPINT image_in,					//入力画像配列
			LPINT image_out,				//出力画像配列
			int xw,							//画像の横幅
			int yw,							//画像の縦幅
			int thresh,						//閾値
			int mode						//閾値処理の方法(1：明るい方が白,2：明るい方が黒)
		  )
{
	LPINT image_buf;
	int		i, j ;
	
	 // 入力と結果が同じ画像の場合、テンポラリ領域を利用する //
    if(image_in == image_out ) {
		if((image_buf = (LPINT)malloc(sizeof(int) * xw * yw)) == NULL) return;
    } else {
		image_buf = image_out;
    }
	memset( image_buf, 0, sizeof(int) * xw * yw) ;
	
	for( i = 0 ; i < xw ; i++ ){
		for( j = 0 ; j <yw ; j++ ){
			switch( mode ){
				case 2 :
					if( *(image_in+i*yw+j) < 0 )			*(image_buf+i*yw+j) =  LOW ;
					else if( *(image_in+i*yw+j) <= thresh )	*(image_buf+i*yw+j) = HIGH ;
					else									*(image_buf+i*yw+j) =  LOW ;
					break ;
				default:
					if( *(image_in+i*yw+j) < 0 )			*(image_buf+i*yw+j) = HIGH ;
					else if(*(image_in+i*yw+j) >= thresh )	*(image_buf+i*yw+j) = HIGH ;
					else									*(image_buf+i*yw+j) =  LOW ;
					break ;
			}
		}
	}

	if(image_in == image_out) {
		memcpy(image_out, image_buf, sizeof(int)* xw * yw);
		free(image_buf);
    }
}

SyntaxHighlighter Evolved の方は選べるテーマが8つあり、表現も多彩です。で、 SyntaxHighlighter Evolved を採用といいたいところなのですが、 SyntaxHighlighter Evolved には「 & 」を「& amp;」と誤ってHTML特殊文字に変換してしまう不具合がありました。

上記「P1&amp;」「P2&amp;」となっているところは入力上は「 P1& 」「 P2& 」になっています。 Highlighting Code Block ではこういったことは起こりません。

これでは SyntaxHighlighter Evolved は使えません。 「 SyntaxHighlighter Evolved 文字化け」でググってみると「＜」「＞」が HTML特殊文字 に誤変換するという記事が出ていていましたが、 「＜」「＞」 は誤変換を起こしていません。で、検索期間を最近1年分に絞って見たところ下記の記事に行き当たりました。

SyntaxHighlighter Evolvedのブロックエディタで「&」が「 &amp; 」になる問題の対応
https://itlogs.net/syntaxhighlighter-evolved-ampersand/
[blogcard url="https://itlogs.net/syntaxhighlighter-evolved-ampersand/"]

どうやらこの問題、Wordpress本体の不具合らしく現在いろいろとテストが繰り返されているようです。2019年6月22日現在不具合の解消には至っていない様子です。

[blogcard url="https://wordpress.org/support/topic/ampersand-character/"]

当面の回避方法があり、Wordpressのテーマの functions.php に下記のコードを追加するという方法です。

function kagg_syntaxhighlighter_precode( $code, $atts, $tag ) {
    if ( 'code' === $tag ) {
        $code = wp_specialchars_decode( $code );
    }
    return $code;
}
add_filter( 'syntaxhighlighter_precode', 'kagg_syntaxhighlighter_precode', 10, 3 );

当然、テーマを変更したときやテーマがアップデートされたとき元に戻ってしまうので、都度対処しないといけないことは留意しておかなければなりませんが、この対処をしておけば SyntaxHighlighter Evolved を使用することは問題なさそうです。

    template <
        typename P1,
        typename P2  
        >
    inline void assign_pixel (
        P1& dest,
        const P2& src
    );

先程の文字化けしていたコードも無事、正常に表示されるようになりました。

WordPress

Posted by kinya