HTMLでMarkdown言語で記述できるスペースを作成

Question

教えていただきたいこと

https://github.com/snym-yt/VisualPMusic
上記のリポジトリでindex.htmlを開くと次のような画面になっていると思います．
次の画面の下に調べたみたこと2でコードを追記した結果があります．

この画面の下の方にテキストがあると思うのですが，この部分をMarkdown言語で記述出来るようにindex.htmlを書き換えたいです．
自分でサイトを見たりしながら次のように記述してみたのですが，うまくいかなかったので，なぜだめなのか，どのようにしたらMarkdownで記述できるのか(そもそもそんなことはできないのか)を教えていただきたいです．

加えて，下のテキスト表示欄は大きさ固定で，それ以上の行がある場合はスクロールして見ることが出来るようにもしたいと考えております．

<style>
        /* 横幅が長い場合に改行するためのスタイル */
        .scroll-container {
            white-space: pre-wrap;
            word-wrap: break-word;
            overflow-wrap: break-word;
            overflow-x: auto; /* 横スクロール可能にする */
            max-width: 1877px; /* 任意の横幅を指定 */
            max-height: 500px; /* 任意の縦幅を指定 */
            border: 1px solid #ccc; /* 枠線を追加（任意） */
            padding: 10px; /* 任意の余白を指定 */
        }
    </style>

    <div class="scroll-container" id="markdown-container">
      <!-- ここに表示したいマークダウンテキストを記述 -->
      ### aaa
      *Lorem ipsum* dolor sit amet, consectetur adipiscing elit. 
      Curabitur vel quam sit amet ligula volutpat condimentum. 
      Sed eu orci vel libero varius suscipit. 
      Nullam condimentum dolor nec efficitur semper. 
      Integer eget dui vitae quam gravida iaculis.
    </div>

デベロッパーツールでのエラー

Uncaught TypeError: marked is not a function
    at index.html:53:37
blockly_compressed.min.js:1074 Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first. https://goo.gl/xX8pDD

調べてみたこと

その1

https://fukuno.jig.jp/2725
ひとまずこのサイトを参照し，

<script src="https://taisukef.github.io/marked_md/marked.min.js"></script>

Markdownを埋め込むよ
<script>md(`
# h1
## h2
### h3
#### h4
##### h5
###### h6
`)</script>

をindex.htmlに入れてみたのですが，そのまま入れただけではMarkdownで表示されていませんでした．

その2

https://zenn.dev/yurukei20/articles/5e341723f68bae
この記事見て実装を進めてみましたけど，Markdownの部分は変わらず出来ませんでした．

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <script src="https://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/8.2.2/markdown-it.min.js"></script>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/destyle.css@1.0.15/destyle.css"
    />
    <link rel="stylesheet" href="css/style.css"/>

    <!-- マークダウン記述箇所 -->
    <main class="l-main-editer js-markdown-editer">
      # h1タイトル
      
      ## h2タイトルタイトルタイトルタイトル
      
      ### h3タイトルタイトルタイトルタイトル
      
      ダミーテキストです。
      
      強調したい箇所は**このように強調させる**ことも可能。
      
      - リスト1
      - リスト2
          - リスト2-1
          - リスト2-2
          - リスト2-3
      - リスト3
      - リスト4
      
      リンクは[リンクテキスト](https://yurukei-career.com/)のように記載。引用ブロックは以下。
      
      > 引用ブロックはこのようになる。
      改行もこのように組み込まれる。
      
      ## テーブル
      
      | No | 名前 | 年齢 |
      |---:|----:|:----:|
      | 1  | 山田 |  24 |
      | 2  | 田中 |  48 |
      
      ---
      
      HTMLをそのまま埋め込むことも可能。
      
      <h2>HTMLタイプのh2テキストとテーブル</h2>
      
      <table>
        <tr>
          <th>No</th>
          <th>名前</th>
          <th>年齢</th>
        </tr>
        <tr>
          <td>1</td>
          <td>山田</td>
          <td>24</td>
        </tr>
        <tr>
          <td>2</td>
          <td>田中</td>
          <td>48</td>
        </tr>
      </table>
      
    </main>
    <!-- /マークダウン記述箇所 -->

    <footer class="l-footer">
      <small class="l-footer__small">&copy;&nbsp;yurukei20</small>
    </footer>

    <script src="https://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/8.2.2/markdown-it.min.js"></script>

Comments

[hoshi-takanori]

Markdown で書いたものを整形して表示するには、何らかの方法で HTML に変換する必要があるかと…。

[退会済みユーザー]

ブラウザのデベロッパーツールを開いてエラーがでているか確認し、エラーが出ている場合はその内容も記載してください。

[aaaa____]

@SaTGOさん
デベロッパーツールで確認出来るエラーを本文に追記させていただきました．
宜しくお願いいたします．

[aaaa____]

@hoshi-takanoriさん
自分なりに調べて変換を行い，追記いたしました

Answer 1

手元で試しました。
エラー表示で 「marked is not a function」 になっているということは、おそらく指定しているMarkedライブラリのバージョンは node.js（サーバー）でしか動かず、フロントエンドでの単独実行に対応していないのではないのかと思います。

下記のように古いバージョン　（　https://cdn.jsdelivr.net/npm/marked@3.0.7/marked.min.js
）
を指定し、イベントハンドラを設定することで入力したマークダウンをレンダリング表示することはできました。

参考：
（ただし、最初の状態では空欄です。あらかじめ固定のマークダウンを仕込んでおいてレンダリング表示するやり方は探索中です。）

...前略...
<body>

    <div id="content" style="display:flex;">
      <div>
        <div id="code" style="width: 800px; padding: 5px;"><pre/></div>
        <button onclick="runCode();">Run</button>
      </div>
      <div id="blocklyDiv" style="height: 720px; width: 1100px; padding: 5px"></div>
    </div>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/marked@3.0.7/marked.min.js"></script>
    <style>
        /* 横幅が長い場合に改行するためのスタイル */
        .scroll-container {
            white-space: pre-wrap;
            word-wrap: break-word;
            overflow-wrap: break-word;
            overflow-x: auto; /* 横スクロール可能にする */
            max-width: 1877px; /* 任意の横幅を指定 */
            max-height: 500px; /* 任意の縦幅を指定 */
            border: 1px solid #ccc; /* 枠線を追加（任意） */
            padding: 10px; /* 任意の余白を指定 */
        }
    </style>
    <div style="display: flex;">
      <div style="margin: 1rem; flex: 5;">
        <textarea name="article" id="markdown_editor_textarea" cols="30" rows="30" class="form-control" aria-label="Markdown">
          <!-- ここに入力-->
        </textarea>
      </div>
      <div style="margin: 1rem; border: 1px solid black; flex: 6;">
        <!-- ここに出力される -->
        <div id="markdown_preview"></div>
      </div>
  </div>
    <script>
      // マークダウンをHTMLに変換して表示
      document.getElementById('markdown_editor_textarea').addEventListener('keyup',function () {
        var html = marked(this.value);
        document.getElementById('markdown_preview').innerHTML= html;
      });
    </script>
...以降略...

---

追記

特に編集する必要がないのであれば、下記のコードで、あらかじめ固定のマークダウンを表示させることはできました。
こちらの方が当初の要件に近いと思われます。
（ 40行目～46行目のように、` と　` の間に、表示したいマークダウンを左詰めで記述してください）

....略....
<body>

  <div id="content" style="display:flex;">
    <div>
      <div id="code" style="width: 800px; padding: 5px;">
        <pre />
      </div>
      <button onclick="runCode();">Run</button>
    </div>
    <div id="blocklyDiv" style="height: 720px; width: 1100px; padding: 5px"></div>
  </div>

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.jsdelivr.net/npm/marked@3.0.7/marked.min.js"></script>
  <style>
    /* 横幅が長い場合に改行するためのスタイル */
    .scroll-container {
      white-space: pre-wrap;
      word-wrap: break-word;
      overflow-wrap: break-word;
      overflow-x: auto;   /* 横スクロール可能にする */
      max-width: 1877px;  /* 任意の横幅を指定 */
      max-height: 500px;  /* 任意の縦幅を指定 */
      border: 1px solid #ccc;   /* 枠線を追加（任意） */
      padding: 10px;  /* 任意の余白を指定 */
    }
  </style>

  <div id="markdown_preview" class="scroll-container">
    <!-- ここに出力される -->
  </div>
  <script>
    // 読み込み時に、マークダウンをHTMLに変換して表示
    window.addEventListener('load', function () {

      //`と`の間に、表示したいマークダウンを左詰めで記述する。
      var text = `
### aaa
*Lorem ipsum* dolor sit amet, consectetur adipiscing elit. 
Curabitur vel quam sit amet ligula volutpat condimentum. 
Sed eu orci vel libero varius suscipit. 
Nullam condimentum dolor nec efficitur semper. 
Nullam condimentum dolor nec efficitur semper. 
Integer eget dui vitae quam gravida iaculis.
`
      var html = marked(text);
      document.getElementById('markdown_preview').innerHTML = html;
    })
  </script>
....略....

Comments

[aaaa____]

ご提案ありがとうございます
なるほど，採用しているバージョンが問題だったのですね．
なぜ3.0.7を選ぶことが出来たのか理由をお伺いしてもよろしいでしょうか．後学に繋げたいと思いまして．
また，おっしゃる通り私が想定していたものは追記で記述されているようなものですね，とはいえ，動的なものも参考にはなりますしまだ模索してくださっているということで，とてもありがたく思います．
まだ実際に手元で動かしたり確認できたりしていないので，ひとまずのコメントとさせていただきます．

[退会済みユーザー]

なぜ3.0.7を選ぶことが出来たのかですが、「Uncaught TypeError: marked is not a function」でGoogle検索したところ、下記のStackoverflowのページが見つかり、その回答に「このリンクに変えなさい」と書いてあったから、という身も蓋もない話です。
https://stackoverflow.com/a/75411068

ただ、今気づいたんですが、その下にさらに
「新しいバージョンの https://cdn.jsdelivr.net/npm/marked@4.3.0/lib/marked.umd.min.js を使うときは、
marked() ではなく、marked.parse()を使え」とも書いてありますね。

[aaaa____]

手元で動かしてみて期待通りの動きを得ることが出来ました．
ありがとうございます．

どこかのサイトで実装していたものでもそうでしたけど，テキストの代入でインデントは"### aaa"などの前にはいれるとMarkdown表記にはならないのですね．
致命的なものではないので問題ないですけど，どうなっているのか気になるので少し調べてみようと思います．

[退会済みユーザー]

インデントを入れると、そのインデント部分が空白（スペース）として扱われてしまうので、Markdownにならないのだと思います。

[aaaa____]

エラーメッセージを調べたら出てくる初歩的なところだったのですね．気をつけます...．
丁寧に教えていただきありがとうございます．