WordPress Plug in CodeMirror BlocksでSyntax Highlightが表示されない

Question

前提・実現したいこと

CodeMirror Blocks ver 1.1.0でPython program をSyntaxHighlight 表示させたい。

WordPress 5.3で
CodeMirror Blocks ver 1.1.0を使ってpython programを行番号表示、Syntax Highlightさせたい。
Codeを言語別に色表示させたい。
EditorはGutenberg 7.0.0

発生している問題・エラーメッセージ

Syntax Highlightされない。エディター内では色表示できているのに、ログアウトして当ブログを表示すると
ライン番号も出ないし、プレーンテキストになってしまう。ただしインデントはされる。

該当のソースコード

CodeMirror Blocks（ver1.0）でキチンと表示されていた（PowerShellのプログラムが）Version Up（ver1.1.0）したとたんGutenberg内では表示されるのに「更新」ボタンをクリックしてログアウトして「Blog名」をリドロウしたとたんプログラムの表示がSyntaxHighlightされずにプレーンテキストとして表示されてしまう。問題が私のオペミスかCodeMirror BlocksまたはGutenbergのバグかアイソレートするためにPythonプログラムをアップすることにする。

print("例：明治 42 年")
S = input("和暦：")
 
syear = 0
print(S.split())
items = S.split()
year = int(items[1])
 
if items[0] == "明治":
    syear = 1867 + year
elif str(items[0]) == "大正":
    syear = 1911 + year
elif items[0] == "昭和":
    syear = 1925 + year
elif items[0] == "平成":
    syear = 1988 + year
elif items[0] == "令和":
    syear = 2018 + year
else:
    print(items[0],"Error")
 
print("西暦",str(syear),"年")ソースコード

試したこと

※　→ログインして編集操作に入った時点ではPython codeはSyntax Highlightしている。「下書き保存」をして、「プレビュー」ボタンして画面を表示させてもまだ正しくHighlight表示しているが「公開する」または「更新」ボタンをクリックして、ログアウトして当ブログを表示すると、code部分はplain text（line番号もなし）表示になってしまっている。ブラウザを変えてみても現象は同じ。「公開する前にチェックを常に表示する。」にチェックを入れて「公開」をクリックした段階で、そのまま「投稿を表示」をクリックしても正しくハイライト表示される。実際にログアウトするとプレーンテキストになってしまう。多分GutenbergかCodeMirror Blocksのバグではないかと思う！
エディター内でPython,HTML,CSSを編集するとそれぞれに合った色表示になっている。

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

Windows10Pro
WordPress 5.3
Gutenberg 7.0.0
CodeMirror Blocks ver 1.1.0

Comments

[CHERRY]

興味を持ったので、インストールしただけのWordPress に質問に書かれているバージョンのプラグインを入れてみましたが、書かれている内容が再現しているのか判断できませんでした。(違うところを見ていて見落としている可能性もあるのですが...)

質問に書かれている文章だけでは、情況がわかりにくいので、画面キャプチャー等を質問に追加して、発生している状況をわかりやすく説明していただけないでしょうか？

また、画面表示がおかしい場合は、テーマに依存している場合(テーマとプラグインの相性)もありますので、お使いのテーマ名の記載していただけないでしょうか？
また、WordPress 標準テーマ(例えば、Twenty Nineteen)の場合に発生するか確認していただけないでしょうか？

[Shintaro117]

Twenty nineteenでライブプレビューしてみたところcodeの一番下にスライダーも付いていましたしインデントもされていましたがライン番号も付いていなかったし文法に従った色分けもされていませんでした。でもtwenty nineteenを使うつもりもありません。画像の配置も嫌いですし、メニューの出し方も嫌いです。

[Shintaro117]

CodeMirror BlocksではいまExecution buttonというbeta versionのmoduleをリリースしていてそのデバッグ中と思われます。（HTMLとCSSのみ対象ですが）。なので私はこの問題に対してしばらくは静観していようと思います。

[Shintaro117]

別のPlug in「Highlighting Code Block」をインストール、有効にしても同じ現象（Gutenberg内ではカラー表示、ログアウトして表示するとプレーン表示になり、Syntax Highlightされない）が出るためPlug inの問題ではなくエディターの問題であると思われる。

[dousojin]

CodeMirror Blocks1.1.1がリリースされてますけど？
https://wordpress.org/plugins/wp-codemirror-block/#description

[Shintaro117]

昨日（19/12/11）CodeMirror Blocksをver 1.1.0からver 1.1.1に更新しましたが現象は変わらず、今日（19/12/12）にEditorのGutenbergをver 7.0.0からver 7.1.0に更新しましたが、やはり現象は変わりませんでした。Editor内ではHighlight表示され、ログオフして当サイトを表示するとハイライト表示されないでプレーンテキストで表示されます。dousojinさん情報を提供してくださって、有難うございました。

[dousojin]

Gutenbergプラグインを使用せずにWP5.3デフォでも発生するんですか？

[Shintaro117]

WP5.2デフォでプラグインWP SyntaxHighlighterでは正しく表示されていました。当トラブルが発生してWP SystaxHighlighterは削除してしまったのでWP5.3ではチェックしていません。

[Shintaro117]

CodeMirror Blocks1.1.1,Gutenberg7.1.0,WP5.3の組み合わせで固定ページであるが色別表示（SyntaxHighlight）をした。GutenbergでもCodeMirror Blocksのバグでもなかった。これまでと違ったのはLIQUID BLOCKSをインストールしただけ。固定ページでできたのだから、投稿ページでもできるようになると思う。

[Shintaro117]

投稿ページではプレーン表示しかされないが、固定ページではSyntaxHighlightの他、WP SyntaxHighlighterでもできなかった、ライン番号の表示もできた。CodeMirror Blocksは一見正常に固定ページでは見える。

Answer 1

各モジュールは最新のバージョンを使用。（12/26現在）
解決済み。固定ページで実現、投稿ページでも大丈夫だと思う。

Answer 2

テーマはTwenty Sixteen使用。
Twenty Nineteenは使いたくありません！
Editor内ではPython program 1つ が色表示されています。
HTML 2つと CSS 2つも正常に色表示されています。
PowerShellもOK。
各モジュールは最新のバージョンを使用。（12/26現在）
解決済み。固定ページで実現、投稿ページでも大丈夫だと思う。

Comments

[Shintaro117]

解決済み。固定ページで実現、投稿ページでも大丈夫だと思う。