質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.49%
Markdown

Markdownは、文書の構造、修飾情報を記述するための軽量マークアップ言語です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

393閲覧

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

aaaa____

総合スコア24

Markdown

Markdownは、文書の構造、修飾情報を記述するための軽量マークアップ言語です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2023/11/28 12:52

編集2023/11/29 13:00

教えていただきたいこと

https://github.com/snym-yt/VisualPMusic
上記のリポジトリでindex.htmlを開くと次のような画面になっていると思います.
次の画面の下に調べたみたこと2でコードを追記した結果があります.
イメージ説明
この画面の下の方にテキストがあると思うのですが,この部分をMarkdown言語で記述出来るようにindex.htmlを書き換えたいです.
自分でサイトを見たりしながら次のように記述してみたのですが,うまくいかなかったので,なぜだめなのか,どのようにしたらMarkdownで記述できるのか(そもそもそんなことはできないのか)を教えていただきたいです.

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

HTML

1<style> 2 /* 横幅が長い場合に改行するためのスタイル */ 3 .scroll-container { 4 white-space: pre-wrap; 5 word-wrap: break-word; 6 overflow-wrap: break-word; 7 overflow-x: auto; /* 横スクロール可能にする */ 8 max-width: 1877px; /* 任意の横幅を指定 */ 9 max-height: 500px; /* 任意の縦幅を指定 */ 10 border: 1px solid #ccc; /* 枠線を追加(任意) */ 11 padding: 10px; /* 任意の余白を指定 */ 12 } 13 </style> 14 15 <div class="scroll-container" id="markdown-container"> 16 <!-- ここに表示したいマークダウンテキストを記述 --> 17 ### aaa 18 *Lorem ipsum* dolor sit amet, consectetur adipiscing elit. 19 Curabitur vel quam sit amet ligula volutpat condimentum. 20 Sed eu orci vel libero varius suscipit. 21 Nullam condimentum dolor nec efficitur semper. 22 Integer eget dui vitae quam gravida iaculis. 23 </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
ひとまずこのサイトを参照し,

HTML

1<script src="https://taisukef.github.io/marked_md/marked.min.js"></script> 2 3Markdownを埋め込むよ 4<script>md(` 5# h1 6## h2 7### h3 8#### h4 9##### h5 10###### h6 11`)</script>

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

その2

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

HTML

1 <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 2 3 <script src="https://code.jquery.com/jquery-1.9.1.js"></script> 4 <script src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/8.2.2/markdown-it.min.js"></script> 5 <link 6 rel="stylesheet" 7 href="https://cdn.jsdelivr.net/npm/destyle.css@1.0.15/destyle.css" 8 /> 9 <link rel="stylesheet" href="css/style.css"/> 10 11 <!-- マークダウン記述箇所 --> 12 <main class="l-main-editer js-markdown-editer"> 13 # h1タイトル 14 15 ## h2タイトルタイトルタイトルタイトル 16 17 ### h3タイトルタイトルタイトルタイトル 18 19 ダミーテキストです。 20 21 強調したい箇所は**このように強調させる**ことも可能。 22 23 - リスト1 24 - リスト2 25 - リスト2-1 26 - リスト2-2 27 - リスト2-3 28 - リスト3 29 - リスト4 30 31 リンクは[リンクテキスト](https://yurukei-career.com/)のように記載。引用ブロックは以下。 32 33 > 引用ブロックはこのようになる。 34 改行もこのように組み込まれる。 35 36 ## テーブル 37 38 | No | 名前 | 年齢 | 39 |---:|----:|:----:| 40 | 1 | 山田 | 24 | 41 | 2 | 田中 | 48 | 42 43 --- 44 45 HTMLをそのまま埋め込むことも可能。 46 47 <h2>HTMLタイプのh2テキストとテーブル</h2> 48 49 <table> 50 <tr> 51 <th>No</th> 52 <th>名前</th> 53 <th>年齢</th> 54 </tr> 55 <tr> 56 <td>1</td> 57 <td>山田</td> 58 <td>24</td> 59 </tr> 60 <tr> 61 <td>2</td> 62 <td>田中</td> 63 <td>48</td> 64 </tr> 65 </table> 66 67 </main> 68 <!-- /マークダウン記述箇所 --> 69 70 <footer class="l-footer"> 71 <small class="l-footer__small">&copy;&nbsp;yurukei20</small> 72 </footer> 73 74 <script src="https://code.jquery.com/jquery-1.9.1.js"></script> 75 <script src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/8.2.2/markdown-it.min.js"></script>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hoshi-takanori

2023/11/28 19:03

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

退会済みユーザー

2023/11/28 23:23

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

2023/11/29 11:54

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

2023/11/30 11:19

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

回答1

0

ベストアンサー

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

下記のように古いバージョン ( https://cdn.jsdelivr.net/npm/marked@3.0.7/marked.min.js

を指定し、イベントハンドラを設定することで入力したマークダウンをレンダリング表示することはできました。

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

html

1...前略... 2<body> 3 4 <div id="content" style="display:flex;"> 5 <div> 6 <div id="code" style="width: 800px; padding: 5px;"><pre/></div> 7 <button onclick="runCode();">Run</button> 8 </div> 9 <div id="blocklyDiv" style="height: 720px; width: 1100px; padding: 5px"></div> 10 </div> 11 12 <meta charset="UTF-8"> 13 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 14 <script src="https://cdn.jsdelivr.net/npm/marked@3.0.7/marked.min.js"></script> 15 <style> 16 /* 横幅が長い場合に改行するためのスタイル */ 17 .scroll-container { 18 white-space: pre-wrap; 19 word-wrap: break-word; 20 overflow-wrap: break-word; 21 overflow-x: auto; /* 横スクロール可能にする */ 22 max-width: 1877px; /* 任意の横幅を指定 */ 23 max-height: 500px; /* 任意の縦幅を指定 */ 24 border: 1px solid #ccc; /* 枠線を追加(任意) */ 25 padding: 10px; /* 任意の余白を指定 */ 26 } 27 </style> 28 <div style="display: flex;"> 29 <div style="margin: 1rem; flex: 5;"> 30 <textarea name="article" id="markdown_editor_textarea" cols="30" rows="30" class="form-control" aria-label="Markdown"> 31 <!-- ここに入力--> 32 </textarea> 33 </div> 34 <div style="margin: 1rem; border: 1px solid black; flex: 6;"> 35 <!-- ここに出力される --> 36 <div id="markdown_preview"></div> 37 </div> 38 </div> 39 <script> 40 // マークダウンをHTMLに変換して表示 41 document.getElementById('markdown_editor_textarea').addEventListener('keyup',function () { 42 var html = marked(this.value); 43 document.getElementById('markdown_preview').innerHTML= html; 44 }); 45 </script> 46...以降略...

イメージ説明


追記

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

html

1....略.... 2<body> 3 4 <div id="content" style="display:flex;"> 5 <div> 6 <div id="code" style="width: 800px; padding: 5px;"> 7 <pre /> 8 </div> 9 <button onclick="runCode();">Run</button> 10 </div> 11 <div id="blocklyDiv" style="height: 720px; width: 1100px; padding: 5px"></div> 12 </div> 13 14 <meta charset="UTF-8"> 15 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 16 <script src="https://cdn.jsdelivr.net/npm/marked@3.0.7/marked.min.js"></script> 17 <style> 18 /* 横幅が長い場合に改行するためのスタイル */ 19 .scroll-container { 20 white-space: pre-wrap; 21 word-wrap: break-word; 22 overflow-wrap: break-word; 23 overflow-x: auto; /* 横スクロール可能にする */ 24 max-width: 1877px; /* 任意の横幅を指定 */ 25 max-height: 500px; /* 任意の縦幅を指定 */ 26 border: 1px solid #ccc; /* 枠線を追加(任意) */ 27 padding: 10px; /* 任意の余白を指定 */ 28 } 29 </style> 30 31 <div id="markdown_preview" class="scroll-container"> 32 <!-- ここに出力される --> 33 </div> 34 <script> 35 // 読み込み時に、マークダウンをHTMLに変換して表示 36 window.addEventListener('load', function () { 37 38 //`と`の間に、表示したいマークダウンを左詰めで記述する。 39 var text = ` 40### aaa 41*Lorem ipsum* dolor sit amet, consectetur adipiscing elit. 42Curabitur vel quam sit amet ligula volutpat condimentum. 43Sed eu orci vel libero varius suscipit. 44Nullam condimentum dolor nec efficitur semper. 45Nullam condimentum dolor nec efficitur semper. 46Integer eget dui vitae quam gravida iaculis. 47` 48 var html = marked(text); 49 document.getElementById('markdown_preview').innerHTML = html; 50 }) 51 </script> 52....略....

投稿2023/11/29 13:08

編集2023/11/29 14:09
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

aaaa____

2023/11/30 11:25

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

退会済みユーザー

2023/11/30 11:56 編集

なぜ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____

2023/11/30 12:04

手元で動かしてみて期待通りの動きを得ることが出来ました. ありがとうございます. どこかのサイトで実装していたものでもそうでしたけど,テキストの代入でインデントは"### aaa"などの前にはいれるとMarkdown表記にはならないのですね. 致命的なものではないので問題ないですけど,どうなっているのか気になるので少し調べてみようと思います.
退会済みユーザー

退会済みユーザー

2023/11/30 12:05

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

2023/11/30 12:05

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.49%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問