Q&A
なんかライブラリとか使ってるならそれを質問文の「補足情報」のところに追記したほうが良いっすよ
前提・実現したいこと
https://github.com/markedjs/marked
上記URL中のmarked.min.jsといったライブラリを使用してWebサイトにMarkdown機能を入れようとしています。
1.Markdown記法でtextareaにテキストを入力
2.入力したテキストを画面右側でプレビュー
テーブル/コードをシンタックスハイライトで表示したいです。
見出し(#)は正常に動作するのですが、テーブルに関しては行と列の間隔は揃っていますがボーダーが表示されません。
シンタックスハイライトに関してはコードに色付け？がされません。
]
解決方法をご教授いただければ幸いです。
該当コード
C#
1<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Markdown.aspx.cs" Inherits="Markdown.Markdown" %> 2 3<!DOCTYPE html> 4 5<html xmlns="http://www.w3.org/1999/xhtml"> 6<head runat="server"> 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 8 <title></title> 9</head> 10<body> 11 <form id="form1" runat="server"> 12 <div> 13 <div style="float: left; width: 50%"> 14 <textarea id="text" runat="server" rows="100" onkeyup="addValue()" style="width: 80%"></textarea> 15 </div> 16 <div id="preview" style="float: right; width: 50%"> 17 </div> 18 </div> 19 </form> 20</body> 21</html> 22<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> 23<script> 24 function addValue() { 25 s = document.getElementById('text').value; 26 document.getElementById('preview').innerHTML = marked(s); 27 } 28</script> 29 30
補足情報（FW/ツールのバージョンなど）
Visual Studio 2019 Community
ASP.NET
C#
ライブラリ
teratailの話でしたら、御覧の通り、投稿後の表示はハイライトされてるように見えます。
としたらタグは「teratail」ですね。
あー
> <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
これの話だったんですが。
gentaro様
ご指摘ありがとうございます。
ライブライ情報を追加いたしました。
gentaro様
度々のご指摘ありがとうございます。
補足情報を修正してみました。
上記の記載方法で合っていますでしょうか？
m.ts10806
ご指摘ありがとうございます。
今回の件に関しましてはローカルのサーバーでコードを実行した場合の話になります。
えーと、それはプログラムに取り込む用のURLでしかないので、提示するとしたら
https://github.com/markedjs/marked
コレじゃないんでしょうか。
で、このライブラリ使ってるけどうまいこと表示できないよ、という趣旨なんですよねたぶん。
冒頭に書いてもらった方がいいかもしれませんね。
「○○というライブラリを利用してWebサイトにマークダウン機能を入れようとしています」のような但し書きがあるとより確実に伝わります。
C# 関係ないですね。marked.min.js の使い方なので JavaScript タグが一番いいかと。
gentaro様
ご指摘ありがとうございます。
お手を煩わせてしまい申し訳ございません。
補足情報を再度修正しました。
m.ts10806様
ご指摘ありがとうございます。
冒頭に説明を追加しました。初投稿で至らないところがあり申し訳ございません。
Zuishin様
ご指摘ありがとうございます。
誤ったタグをつけていました。
Javascriptタグを追加しました。
どういたしまして。
とはいえ個人的には使ったこと無いライブラリなんで、マニュアル読むなりしないと回答できないですけどね。
CSSを別途用意するとか、そういう方向じゃないんだろうかと思いますが。
gentaro様
ご回答ありがとうございます。
改めてライブラリのマニュアルを読んでみます。
回答2件
0
自己解決
自己解決いたしましたのでお伝えいたします。
marked.jsの拡張機能としてhighlight.jsが必要となるらしいです。
下記参照サイトの通りに実装したところ求めていたことが実装できました。
参照：https://qiita.com/samuraibrass/items/d40d54aa0754692d5439
皆様ありがとうございました。
投稿2020/04/15 11:28
総合スコア8
0
デモページで遊んでみましたが、シンタックスハイライト出ませんね。
テーブルも線が出ません。
https://marked.js.org/demo/
そういう（コードの文字列に色がつかない・テーブルにボーダーがない）ライブラリなのでは？
一応ハイライトについても言及されてはいます。
Asynchronous highlighting
投稿2020/04/14 13:50
編集2020/04/14 13:54総合スコア80875
あなたの回答
tips
プレビュー
