TablePress のセル内にEnlighterJSで表示する方法

TablePress内にコードを表示してもHTMLの<pre><code>の基本の表示しかできず綺麗に表示できません。 しかも言語をJavascript、PHP、Python、HTML、CSSと多岐に渡るとその装飾も大変だし、本文で使用しているEnlighterJSの表示と異なるのも統一感が無くなるので、何とかTablePressのセル内のコードもEnlighterJSで表示したいと思っていました。 その方法が分かったので掲載します。 間違いがあったらご指摘いただけると嬉しいです。

こんな風になります

ここに<script>を書いてます
ここは何も書いてませんが左のセルに以下を書いています。
<script>var ichiri_enlighter={theme:"classic", linenumbers:"true"}</script>
下のセルに<pre以降を書いています。 EnlighterJSRAWを指定してます。 記述はちょっと長い。
<pre class="EnlighterJSRAW" data-enlighter-language="javascript" data-enlighter-theme="atomic" data-enlighter-linenumbers="false">app.use(session({
secret: "secret",
resave: false,
saveUninitialized: true,
cookie: {
httpOnly: false,
secure: false,
maxAge: 10 * 1000 }
}));</pre>
下のセルに<pre以降を書いています。 <pre>だけで何も指定していません。 記述が短いでしょ?
<pre>app.use(session({
secret: "secret",
resave: false,
saveUninitialized: true,
cookie: {
httpOnly: false,
secure: false,
maxAge: 10 * 1000 }
}));</pre>
文字も書けます。
app.use(session({
  secret: "secret",
  resave: false,
  saveUninitialized: true,
  cookie: { 
    httpOnly: false,
    secure: false,
    maxAge: 10 * 1000 }
}));
文字も書けます。
app.use(session({
  secret: "secret",
  resave: false,
  saveUninitialized: true,
  cookie: { 
    httpOnly: false,
    secure: false,
    maxAge: 10 * 1000 }
}));

一番簡単なのはこの方法 その1

セルに以下の様にべたに貼り付ける。 書式を整えようとして改行すると<br>が入って、Web表示した時に一行空いてしまう。 下で最低必要なのはclass=”EnlighterJSRAW”だけ。

<pre class="EnlighterJSRAW" data-enlighter-language="js" data-enlighter-theme="atomic">$(window).on('load',function(){});</pre>

その他オプション

  • data-enlighter-highlight=””
  • data-enlighter-linenumbers=”false”
  • data-enlighter-lineoffset=””
  • data-enlighter-title=””
  • data-enlighter-group=””

次に簡単な方法 その2(コードを沢山書く時)

テーブルに沢山のコードを書く時には、class=”EnlighterJSRAW”を省略できて<pre>だけで書けるので便利。 以下の初期値以外への言語変更やテーマは、data-enlighter-languageやdata-enlighter-themeで個々に指定が可能です。

各ページの下にあるカスタムJavascriptに以下のコードを入れるだけ。(EnlighterのReadme.mdを少し変更)

EnlighterJS.init('pre', 'code', {
    language : 'javascript',
    theme: 'atomic',
    indent : 4,
    linenumbers: false
});

その他のオプション一覧

TablePressのセル内で共通設定する方法 その3

上記のEnlighterJS.initは、ページ依存になり同じTablePressの表を別のぺージに入れる時に、またカスタムjavascriptに記述しなければなりません。 この方法は、TablePressのセルにショートコードの様に記述するとその表内のセルに<pre>タグだけでEnlighterJSを使える様になります。 している事は簡単です。

  1. 自作javascriptファイルに上記コードを入れる
  2. 自作javascriptファイルは、フッター内で’jqyuery’と’enlighterjs’の後に読み込む。wp_enqueue_script で $deps=array(‘jquery’,’enlighterjs’), $in_footer:true にする。
  3. 変数をTablePressのセルに入れる
  4. 自作javascriptでは特定名変数がある時だけEnglighterJSを読み込むようにする。

自作javascript内のコード

  1. ichiri_enlighterが無ければ処理をしません。
  2. 初期値を設定するか、セルに書かれた変数から値を読み込んでます。
  3. EnlighterJS.init()で値を設定しています。
$(function(){
    let a={};
    if(typeof ichiri_enlighter !== 'undefined'){
        a.lang = ichiri_enlighter.lang?ichiri_enlighter.lang:"javascript";
        a.theme = ichiri_enlighter.theme?ichiri_enlighter.theme:"atomic";
        a.indent = ichiri_enlighter.indent?parseInt(ichiri_enlighter.indent):4;
        a.linenumbers = ichiri_enlighter.linenumbers?ichiri_enlighter.linenumbers:false;
        EnlighterJS.init('pre', 'code', {
            language : a.lang,
            theme: a.theme,
            indent : a.indent,
            linenumbers:a.linenumbers
        });
    }
})

セル内に記述するコードと変数

  • 下のコードをコピペするだけです。
  • 非表示指定になっていなければ、どのセルに記述しても構いません。
  • このコードは表示されません。
  • そのセルに書かれている文字の前でも、後ろでも改行なしで付け足してください。
  • 本文に入れてもいいですが、『ブロックのリカバリ』の表示がでて、クリックするとWordPressが気を利かして消してくれます。 なので使いたくありませんね。
  • 引数は無ければ初期値を使います。
<script>var ichiri_enlighter={"lang":"nodejs","theme":"atomic","indent":"5"}</script>

最も短い記述は以下の通りです。 ={}は必要です。

<script>var ichiri_enlighter={}</script>

自作javascriptの読込

自作プラグイン内で以下の様に読み込んでいます。 ページ指定はここを見てみてください。

function add_scripts_by_page(){
	$PAGES_ICHIRI_TEST=array(4416,
                                 5481,
				"how_to_use_mathjax-latex_and_list"		
			         );    //自作javascriptを読み込むページ指定
    if(is_single($PAGES_ICHIRI_TEST)) {
	wp_enqueue_script(
	    $handle='my_php_handle',
	    $src=plugins_url() . '/my-plugin-1/ichiri_test.js',
	    $deps=array('jquery','enlighterjs'),  //先に読み込むjsファイル
	    $ver='0.0.0.6',
	    $in_footer=true);                     //フッターに読み込むしてい
	}
}
add_action($hook='wp_enqueue_scripts', $function='add_scripts_by_page',$priority=10, $arg_num=1);

TablePressで<pre>を使う注意 <br>が現れる場合

TablePressに直接コピペすると、改行した部分に<br>が入っていしまいます。(普通のHTML編集では改行が<br>にならないのが<pre>の良いところなのですが。)TablePressの編集画面はHTML直編集でないので、改行コード(\n)は<br>に置き替えられてしまいます。 なので、複数行のコードをセルに直にコピペすると<br>が付いてしまって、公開した時にコード内に<br>が見えてしまいます。 

これを防ぐにはショートコードに、convert_line_breaks=falseの記述を加えるだけ。 TablePressのTobiasさんに教えて貰いました。 convert_line_breaks=falseの記述を加えると改行(\n)は<br>に変換されず、EnlighterJS表示で<br>が表示されなくなります。 つづきがあります。

[table “123” not found /]

しかし、改行を<br>に変換してくれないという事は、convert_line_breaks=falseを書き加えたショートコードのTablePressのテーブルで、EnlighterJS外の改行部分が改行しなくなります。(TablePressの編集画面では改行されていますが、プレビューで見た時は改行されません。)なので、EnlighterJS外で改行したいところに<br>を入れていく必要があります。 EnglighterJSの作者は対応できないと言っているので、このconvert_line_breaks=falseを使って、面倒ですが、<br>を入れていくのがベストです。

自作プラグインとショートコードの連携(動作しない)

ショートコードを入れたら上記コードを貼り付ける様にしたのですが、自作javascriptファイル貼り付けられる場所がenglighterjs.min.jsを読み込む前で、EnglighterJS.init()が認識されませんでした。 ショートコードでの実行で属性値だけを取り、別のアクションフックか何かのタイミングでenlighterjs.min.jsより下に貼り付ける方法はあるかもしれないのですが、変数の受け渡しが2度になりややこしくなるので断念しました。 ショートコードではないですが、TablePress内では上記の方法で綺麗に動作させることが出来るので、上記の3つの方法の組み合わせで使っていこうと思います。

EnlighterJSのショートコード 非推奨&動作せず

ここを見たらEnlighterJSの作者にめちゃくちゃ非推奨されてました。 しかも『Classic EditorやGutenberg Editorでは絶対使うな!』と書いてありました。 それでも以下の2つのショートコードをセルと本文にに書いて試してみましたが表示されませんでした。

[codegroup theme="mytheme"]
    [js tab="Javascript Message"]
$(window).on('load',function(){});
[/js][/codegroup]
[enlighter lang="js"]
window.addEvent('domready', function(){
	// display string on console
	console.info('Hello Enlighter');
	
	// show element
	$('#myelement').show();
});		
[/enlighter]

コメント

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