【Markdown、HTML】Visual Basicのコードブロックの中に"<TODAY()"を入れると、その周辺の行が表示されなくなる
521 語
3 分
【Markdown、HTML】Visual Basicのコードブロックの中に"<TODAY()"を入れると、その周辺の行が表示されなくなる
はじまり

リサちゃん
なんじゃそりゃ!

135ml
どうしたんだい?

リサちゃん
HTMLの中に`TODAY`を入れたら、何かおかしいことになった

135ml
なんじゃそりゃあ?
今回の事象
なんじゃそりゃ。
って感じのタイトルですが、そういうことが起きたので、記事に起こしてみました。
今回、起きた事象は、以下のMarkdown(HTML)を書いた時に、一部分だけテキストが表示されなくなってしまった事象です。
まず、ExcelとかGoogle Spreadsheetの関数をコードブロックにして表示させようとしました。言語を「Visual Basic」にすると、イイ感じにシンタックスハイライトされるのでそうしています。
しかし、このコードをブロックに入れると途中の2行が表示されないのです。
<table> <tr> <td> <img alt="🐧" src="./20210401_LedgerForPcBringing/img_01.jpg"> </td> <td> <img alt="🐧" src="./20210401_LedgerForPcBringing/img_02.jpg"> </td> </tr> <tr> <td> <img alt="🐧" src="./20210401_LedgerForPcBringing/img_03.jpg"> </td> <td> <pre data-role="codeBlock" data-info="code:visualbasic" class="language-code:visualbasic"><code>=AND($L9<>"",$L9>$G9)=AND($L9="",$G9<>"",$G9<TODAY())=MOD(ROW(),2)=1=AND($K9<>"",$K9<$F9)=AND($K9="",$F9<>"")=MOD(ROW(),2)=1</code></pre> </td> </tr></table>まず、コードブロックにしたかったので、<pre>タグで書いてみたら・・・、
<td> <pre data-role="codeBlock" data-info="code:visualbasic" class="language-code:visualbasic"><code>=AND($L9<>"",$L9>$G9)=AND($L9="",$G9<>"",$G9<TODAY())=MOD(ROW(),2)=1=AND($K9<>"",$K9<$F9)=AND($K9="",$F9<>"")=MOD(ROW(),2)=1</code></pre> </td>なんだか一部消えてしまっています。

次に、<pre>タグは諦めて、ただのテキストにしても・・・、
<td> <a>=AND($L9<>"",$L9>$G9)<br>=AND($L9="",$G9<>"",$G9<TODAY())<br>=MOD(ROW(),2)=1<br>=AND($K9<>"",$K9<$F9)<br>=AND($K9="",$F9<>"")<br>=MOD(ROW(),2)=1</a> </td>この有様です。

原因と解決
あまり、HTMLに慣れていない僕なので、今回の事象にハマってしまいましたが、
原因は、TODAY()の前の<をエスケープしていなかったことでした!
例えば、<pre>タグの中で言えば、この部分が一つのタグとして認識されてしまっていたようです。
<TODAY())=MOD(ROW(),2)=1=AND($K9<>まず、<pre>タグのコードブロックの方はこれでテキストの端折れは起きませんでした!
<table> <tr> <td> <img alt="🐧" src="./20210401_LedgerForPcBringing/img_01.jpg"> </td> <td> <img alt="🐧" src="./20210401_LedgerForPcBringing/img_02.jpg"> </td> </tr> <tr> <td> <img alt="🐧" src="./20210401_LedgerForPcBringing/img_03.jpg"> </td> <td> <pre data-role="codeBlock" data-info="code:visualbasic" class="language-code:visualbasic"><code>=AND($L9<>"",$L9>$G9)=AND($L9="",$G9<>"",$G9<TODAY())=MOD(ROW(),2)=1=AND($K9<>"",$K9<$F9)=AND($K9="",$F9<>"")=MOD(ROW(),2)=1</code></pre> </td> </tr></table>preタグがレンダリングされたものです。

次に、ただの<a>タグにしても、テキストの端折れは起きませんでした!
<table> <tr> <td> <img alt="🐧" src="./20210401_LedgerForPcBringing/img_01.jpg"> </td> <td> <img alt="🐧" src="./20210401_LedgerForPcBringing/img_02.jpg"> </td> </tr> <tr> <td> <img alt="🐧" src="./20210401_LedgerForPcBringing/img_03.jpg"> </td> <td> <pre data-role="codeBlock" data-info="code:visualbasic" class="language-code:visualbasic"><code>=AND($L9<>"",$L9>$G9)=AND($L9="",$G9<>"",$G9<TODAY())=MOD(ROW(),2)=1=AND($K9<>"",$K9<$F9)=AND($K9="",$F9<>"")=MOD(ROW(),2)=1</code></pre> </td> </tr></table>aタグがレンダリングされたものです。

おしまい

リサちゃん
なんじゃこりゃあ

135ml
って感じだけど、原因が分かればなるほどと思えるよね。

リサちゃん
じゃあ、HTML使ってコードを直に書いたら表現できない時がある? そんなあ。
おまけ

135ml
今回の記事を最初投稿したら・・・


135ml
そんなことあるぅ?(タイトルもエスケープしました。)
以上になります!
記事を共有
この記事が役に立ったなら、ぜひ他の人と共有してください!
【Markdown、HTML】Visual Basicのコードブロックの中に"<TODAY()"を入れると、その周辺の行が表示されなくなる
https://endorphinbath.com/posts/markdown-html-today-vanishes-row/ 【GitHub】PythonとGitHub ActionsでProjectsにIssuesを作る作業を自動化する(前編:Pythonのソース)
【GAS、Google Spreadsheet】ブログに使用した画像をGoogleドライブで管理するために書いたスクリプト
関連記事 スマート
1
【PowerShell、HTML】画像の不要な部分を数値化して、その座標でトリミングする
Code HTMLとJavaScriptとPowerShellで画像を一気にトリミングする記事です。OutOfMemoryExceptionとExternalExceptionをWrite-Errorでやり過ごしたりします。
2
【Googleスプレッドシート、GAS】選択した範囲をHTMLのtableタグとして画面上に出力する
Code Googleスプレッドシートで編集したセルをそのままCSVやTSVとして出力するツールを作りました。この機能を導入することによって、データの受け渡しが楽になるかと思います。
3
【Googleスプレッドシート、GAS】選択した範囲をHTMLのtableタグとしてテキスト出力する
Code Googleスプレッドシートで編集したセルをそのままHTMLのtableタグとして出力するツールを作りました。HTMLの編集は面倒ですが、これを使えば編集はGoogle Spreadsheetで管理することが出来ます。
4
【Cocoon、Wordpress】Cocoonでダークテーマとライトテーマで配色を使い分ける方法をメモ書いておく
Software WordpressのCocoonテーマ上でダークテーマとライトテーマの設定する方法をまとめました。設定方法は簡単ですが、配色を選ぶ作業で時間が掛かるかもしれません。早い内にサイト上で設定することでその後のデザイン変更が容易になると思います。
5
今年食ったサバ缶のまとめ(2025年版:後編)
Mackerel 2025年に筆者が食べたサバ缶、イワシ缶、サンマ缶などを紹介します。個人的な美味しさ、DHAおよびEPAの含有量の目安なども掲載しています。
ランダム記事 ランダム