WordPressでソースコードブロックにファイル名を入れたい

前提・実現したいこと

WordPressで個人ブログのようなものを書こうとしています。
テーマにLuxeritasを使っているのですが、ソースコードをシンタックスハイライターに貼り付ける際、ファイル名を入れたいです。

発生している問題

下記画像のように表示されるのですが、赤字のとおり、ファイル名が入りません。

試したこと

まず何をすればいいのか分かりませんでした。

設定に存在しないか、どこでシンタックスハイライターを制御しているのか、などを調べたのですが、Luxeritas自身が用意しているもので、中身がprism.jsだというところまでしか分かりませんでした。およそ、prism.jsのプラグインであるprism-toolbar.jsを使えば、入れられるのではないか？と漠然と考えてます。

質問

ベストプラクティスとして、どうするのがいいのでしょうか？
可能であれば、あまり弄り回したくはありません。方向性から教えて下さい。

「やってほしいことだけを記載した丸投げの質問」という指摘があり、しかし方向性から教えて欲しいのに質問内容を変えるわけにも行かず、とりあえずというレベルの回答を自分で2つ用意しました。この状態であればご回答頂けると思い、手を尽くしているのですが、どうしたことか指摘された方々から反応がありません…これは嫌がらせか何かなのでしょうか？

補足情報（FW/ツールのバージョンなど）

PHP 7.3
WordPress 5.3.2–ja
CentOS6

dameo

2020/08/11 04:33 編集

質問内容には編集する必要を感じません。代わりに稚拙な回答を用意してみましたので、低評価された5名の方、お忙しいところ大変恐縮ですが、ご回答もしくはアドバイス他、いろいろご指導頂ければ幸いです。

行動規範の内容に同意します

回答2件

汎用的に解決しそうな怪しげな方法

記事の編集画面のJavaScriptをいじり、ファイル名を記入できるようにしてみました。
当該ファイルから直にwp_postsのcontentカラムのデータ形式で生成しているようなので、そのようにしてみたところ、pre要素の最後の属性としてdata-label属性にファイル名を入れて送っています。

diff
1diff --git a/wordpress/wp-content/themes/luxeritas/js/luxe-blocks.js b/wordpress/wp-content/themes/luxeritas/js/luxe-blocks.js
2index 4d52b2a..7a6f8d5 100644
3--- a/wordpress/wp-content/themes/luxeritas/js/luxe-blocks.js
4+++ b/wordpress/wp-content/themes/luxeritas/js/luxe-blocks.js
5@@ -4722,6 +4722,10 @@ function() {
6           language: {
7               type: "string",
8               default: ""
9+          },
10+          filename: {
11+            type: "string",
12+            default: null
13           }
14       },
15       supports: {
16@@ -4780,7 +4784,18 @@ function() {
17               options: c,
18               onChange: function(e) {
19                   return n({
20-                      language: e
21+                      language: e,
22+                      filename: o.filename
23+                  })
24+              }
25+          })),
26+          l.push(s(d.TextControl, {
27+              label: u("File Name", "luxeritas"),
28+              value: o.filename,
29+              onChange: function(e) {
30+                  return n({
31+                    language: a,
32+                    filename: e
33                   })
34               }
35           })),
36@@ -4807,7 +4822,8 @@ function() {
37             , o = t.content
38             , n = t.language.replace("highlight_", "");
39           return "" != n ? s("pre", {
40-              className: "line-numbers language-" + n
41+              className: "line-numbers language-" + n,
42+              "data-label": t.filename
43           }, s("code", {
44               className: "language-" + n
45           }, o)) : s("pre", null, s("code", null, o))
46diff --git a/wordpress/wp-content/themes/luxeritas/languages/admin/luxeritas-ja-luxe-blocks.json b/wordpress/wp-content/themes/luxeritas/languages/admin/luxeritas-ja-luxe-blocks.json
47index 4d04781..8381a3c 100644
48--- a/wordpress/wp-content/themes/luxeritas/languages/admin/luxeritas-ja-luxe-blocks.json
49+++ b/wordpress/wp-content/themes/luxeritas/languages/admin/luxeritas-ja-luxe-blocks.json
50@@ -200,6 +200,9 @@
51                        "Code Language": [
52                                "言語"
53                        ],
54+                       "File Name" : [
55+                               "ファイル名"
56+                       ],
57                        "* The theme can be changed from the CSS tab of Luxeritas menu.": [
58                                "※ テーマ(見た目)は Luxeritas メニューの CSS タブから変更できます。"
59                        ],

※luxe-blocks.jsはminifyされていたので、chromeでbeautifyしたものを元にしています

編集画面

結果画面

注意事項

テストしていません
既存のデータを正しく読み込めない可能性があります
既存データを壊してしまう可能性があります
壊してしまった場合、データベースを直接修正しないと直せません
壊れてしまっても一切責任を持ちません
バージョンアップだけでなく、テーマの設定を変えるだけで変更が消えてしまい、データベースのデータと整合が取れなくなり、壊れる可能性があります
なので、絶対に使わないでください

投稿2020/01/17 13:00

編集2020/01/17 13:14

dameo

総合スコア943

限定的に解決可能な醜悪な方法

シンタックスハイライターで言語を指定し、ソースコードを記述する
プレビューで確認する
ChromeのデベロッパーツールなどでInspectしてシンタックスハイライター部分を選択し、当該HTML要素をコピーする
プレビュー画面を閉じる
編集画面でシンタックスハイライターブロックを削除して代わりにカスタムHTMLブロックを作成する
コピーしたHTMLをカスタムHTMLブロックに貼り付ける
<div class="toolbar-item"><span>Markup</span></div>の前に<div class="toolbar-item"><span>ファイル名</span></div>を入れる
ダミーで同じ言語を選択したシンタックスハイライターブロックを追加する