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

2022.02.09

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 }
}));

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

セルに以下の様にべたに貼り付ける。　書式を整えようとして改行すると<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=””

次に簡単な方法　その２（コードを沢山書く時）

テーブルに沢山のコードを書く時には、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のセル内で共通設定する方法　その３

上記の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>が表示されなくなります。　つづきがあります。





	拡張子関係ソフト説明






	.cacheVivadoディレクトリ




	.genVivadoディレクトリ




	.hwVivadoディレクトリ




	.ip_user_filesVivadoディレクトリ




	.xprVivadoでプロジェクトを作った時に生成されるXilinx Project
プロジェクトファイル。
ダブルクリックするとプロジェクトが開く。




	.sdkディレクトリ
ハード定義が入っているらしい。
Vivado 2022で合成したが、.sdkディレクトリは生成されなかった。




	.simVivadoディレクトリ




	.srcsVivadoディレクトリ
各種プロジェクトのソースフィアルを入れるディレクトリ。
.bitファイルもここに生成される。




	.xsaVivadoでFile/Export/Export Platformで生成して、PetaLinuxで使うXilinx Support Archive
Vitis のAccelerated Applicationにするには、
spfmと同じファイル名でないといけない。




	u-boot-dtb.elfu-boot.elfにデバイスツリーdtbが含まれている。




	u-boot.binu-bootイメージの最終形。
ATF, PMUFW, FSBL, U-Boot イメージが入る。
◆従来のファイル名
boot/bl31.elf
boot/u-boot.elf
boot/system.dtb




	u-boot-dtb.binu-boot.binにデバイスツリーdtbが含まれている。




	image.ubbootable kernel image
とデバイスツリーを含む
 - Image（Linux Kernel）
 - zynq.dtb（Device Tree Blob）
image.ubは、BOOT.BIN、boot.scrと一緒に/BOOT/に入れる

Fit image name
petalinux-configで設定。




	zynqmp_fsbl.elfFist Stage Boot Loader





	bl31.elfARM Trusted Firmware
BL:Boot Loader




	pmufw.elfPlatform Management Unit Firmware
Vivadoで.hdlから生成される




	system.dtbVivadoがソースを作成し、PetaLinuxがビルドシステムのデバイスツリーブロブ（バイナリ）。
Overlayを使えるようになっている。




	BOOT.BINBOOT.BINには、以下が入る。
 - pmufw.elf（Platform Management Unit Firmware）
 - fsbl.elf（First Stage Boot Loader）
 - bl31.elf（ARM Trusted Firmware）
 - u-boot.elf
 - Bitstream <---BOOT.BINからPLを起動する場合。
BOOT.BINとimage.ubとboot.scrをSDカードのFAT32第一パーティションに入れてブートする。
ルートFS はext4パーティションにrootfs.tar.gzを解凍して入れる。（sudo)

初期値ではPetaLinuxはu-boot.elfからJTAG/BOOT.BINを作る。
bootgenはu-boot.elfからsymbolsを取り除く。　BOOT.BINにu-boot-dtb.elfを使うことも出来る。




	uboot.elfu-boot-spl.binと同様で、fsbl.elfや.binとマージさせるためのu-bootイメージファイル。
Second Stage Boot Loader





	linux.bif Boot Image Format
BOOT.BIN のレイアウトを定義します。
Bootgen のブート コンポーネント構造を記述する BIF (linux.bif) 
起動順に記載する。
ZynqとVersalは記述文法が異なる。
コメントは、/*  */ か //。




	sysrootKernel空間で動作するKernelモジュール（ドライバ）生成するために使用するKernelヘッダーファイルやCライブラリ群とディレクトリ群。




	plm.elf




	pmc_cdo.bin




	image.gz




	.bin全FPGAデバイスで使用未処理の実行可能バイナリファイル




	.dtb全FPGAデバイスで使用Device Tree Blob
デバイスツリーをコンパイルしたバイナリファイル




	.gz全FPGAデバイスで使用未処理の実行可能バイナリファイル




	.elf全FPGAデバイスで使用Executable Linking FIle
複数の実行ファイルをリンクした実行可能バイナリファイル





	.int全FPGAデバイスで使用レジスタ初期化ファイル




	.nky全FPGAデバイスで使用AES暗号化鍵




	.pub全FPGAデバイスで使用RSA暗号化鍵




	.pem全FPGAデバイスで使用RSA暗号化鍵




	.sig全FPGAデバイスで使用Signature
Bootgen または HSM によって生成される署名ファイル。




	.bitZynq-7000
Zynq UltraScale+ MPSoC
Versal以外FPGABIT ファイル ヘッダーを除くビットストリーム




	.rbtZynq-7000
Zynq UltraScale+ MPSoC
Versal以外FPGABIT ファイル ヘッダーを除くビットストリーム




	.bdfBoard Definition File
ボードで使用する端子設定情報を含むファイル。




	.pllgm_port2.pl  




	.dtdboard.dtd part0_pins.dtd  preset.dtd





	.xdcXilinx Design Constraintファイル
Xilinxの場合、ピン配や設定も.xdcでTcl文法で記述する。




	.bdBlock Design ファイル
VivadoでCreate HDL Wrapperした時にVerilog Wrapperファイルと共に生成される。




	インターフェース名.xml




	インターフェース名_rtl.xml




	xgui/IP名_バージョン.tcl自分のIP




	RTLソース自分のIP




	component.xml自分のIP




	IP中のXILINX IP名/IP中のXILINX IP名.xci自分のIP




	.bb
fsbl-firmware.bb
plm-fimeware.bbPetaLinuxBitBakeのレシピファイル
fsbl.bb (旧レシピ)
plm.bb (旧レシピ)




	.bbclassPetaLinuxBitBakeのclass




	xilinx_zynqmp_defconfig/build/tmp/work-shared/zynqmp-generic/kernel-source/arch/arm64/configs/




	.mcsＭicro Controller Systemファイル
MicroBlaze向けPROMに書き込む為のファイル




	.wicFlashメモリやSDから起動する為のパーティション構造も入ったイメージファイル。
パーティション構造定義wksファイルを参照して作る。（Linux、Windows、Mac共通）
◆解凍方法
$ xz -d petalinux-cdimage.wic.xz




	.wskOpenEmbedded Kickstart
.wicを作る時の設定ファイル。




	.xclbinVitisで生成される。Xilinx Compiled Binary
以下を含む
1. PLに展開するFPGAユーザープログラムのBitstream（VerilogやVHDLで記述）
2. PS部のハード設定
3. ハードウェアカーネル（.xo)（C/C++等で記述）
v++（Vitis Compiler)で生成される。
.xclbinは、Xilinx runtime APIかXRTかOpenCLでruntimeにFPGAにロードされる。




	.xoXilinx object
ハードウェアカーネル
XilinxのFPGA開発としてのハードウェアカーネルとは、ユーザーが開発したFPGAで実行される関数部分の事。
Cプログラム等を高速に実行するためにVitisで.xoとして生成され、他のハードとリンクされxclbinファイルのFPGA Bitstreamとなって、FPGAにロードされる。　FPGA１個に対して、関数が複数あれば、.xoファイルは複数個存在するが、xclbinは1個歯科存在しない。




	bblayer.conf




	prserve.sqlite3




	components/yoct/conf/local.confMACHINEがリストされている




	components/yoct/conf/bblayers.conf




	system.bitFPGAの内部接続を設定するBitstream。
Optionally PL (FPGA) bitstream
Block Design等で生成。




	.spfmSoftware Platform file
Vitis のAccelerated Applicationにするには、
xsaと同じファイル名でないといけない。




	.saifSimulation Active File




	.xpfmVitisで作るXilinx Platform ファイル

しかし、改行を<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より下に貼り付ける方法はあるかもしれないのですが、変数の受け渡しが２度になりややこしくなるので断念しました。　ショートコードではないですが、TablePress内では上記の方法で綺麗に動作させることが出来るので、上記の３つの方法の組み合わせで使っていこうと思います。

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]

コメント