【Markdown、HTML】Visual Basicのコードブロックの中に”<TODAY()”を入れると、その周辺の行が表示されなくなる

はじまり

今回の事象

なんじゃそりゃ。
って感じのタイトルですが、そういうことが起きたので、記事に起こしてみました。

今回、起きた事象は、以下のMarkdown（HTML）を書いた時に、一部分だけテキストが表示されなくなってしまった事象です。

まず、ExcelとかGoogle Spreadsheetの関数をコードブロックにして表示させようとしました。言語を「Visual Basic」にすると、イイ感じにシンタックスハイライトされるのでそうしています。

しかし、このコードをブロックに入れると途中の２行が表示されないのです。

<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タグがレンダリングされたものです。

おしまい

おまけ

以上になります！