マークダウンを javascript で変換したい
したいです。
最初は marked.js を使ってみた。
使ってみました。
問題点
-
基本はマークダウンで書いて、でも一部だけ HTML タグも混在させたいです。
でも marked.js を使うと、HTML タグを混在させた時にいらない改行が入ります。 -
というか marked の設定で breaks:true にしなければ大丈夫なのですが、breaks は true にしたい…
＃ breaks:true にすると、改行したところで改行してくれる(？)
＃ breaks:false だと、改行したい場合は末尾にスペースを2つ入れるんでしたっけ。面倒くs
-
以下のソースをべろっとコピペすればそのまま動く筈です。
最後の「HTMLタグで書いたテーブル」の上に超スペースが入ります。
多分 HTML タグ中の改行も 改行として処理されてるからだろうと思うのですが。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<!-- ★マークダウン変換用 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>
<!-- ◆シンタックスハイライト用 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js"></script>
<!-- ◆VBをシンタックスハイライトする必要があるならこれ↓も入れる -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/languages/vbnet.min.js"></script>
<!-- ◆シンタックスハイライト用 css （好きなテーマを選んで指定する） -->
<!-- ◇https://highlightjs.org/static/demo/ -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/ir-black.min.css">
<script>
$(function() {
// ★marked.js の設定
marked.setOptions({
breaks : true,
// highlight.js でハイライトする
highlight: function(code, lang) {
return hljs.highlightAuto(code, [lang]).value;
}
});
// highlight.js の初期処理
hljs.initHighlightingOnLoad();
// ★マークダウンを HTML に変換して再セット
var md = marked(getHtml("body"));
$("body").html(md);
});
// 比較演算子が < 等になるので置換
function getHtml(selector) {
var html = $(selector).html();
html = html.replace(/</g, '<');
html = html.replace(/>/g, '>');
html = html.replace(/&/g, '&');
return html;
}
</script>
<style>
table { border-collapse: collapse; }
th, td { border:1px solid #999; padding:2px 5px; }
th { background:#e0e0e0; }
</style>
</head>
<body>
# テスト
## HTMLタグを混在させる
HTML タグを混在させたいです。
セルの内容が多い時は、マークダウンのテーブルだと逆に見づらいし…
rowspan とかもできないし
-----
↓ これはマークダウンで書いたテーブルです。
|分類 |ID |商品名 |
|:----------|:----|:--------|
|くだもの |A001 |りんご |
|くだもの |B002 |バナナ |
|やさい |C003 |キャベツ |
↑ これはマークダウンで書いたテーブルです。
↓ これはHTMLタグで書いたテーブルです。
<table>
<tr>
<th>分類</th>
<th>ID</th>
<th>商品名</th>
</tr>
<tr>
<td>くだもの</td>
<td>A001</td>
<td>りんご</td>
</tr>
<tr>
<td>くだもの</td>
<td>B002</td>
<td>バナナ</td>
</tr>
<tr>
<td>やさい</td>
<td>C003</td>
<td>キャベツ</td>
</tr>
</table>
↑ これはHTMLタグで書いたテーブルです。
</body>
</html>
markdown-it を使ってみた。
-
どうしても解決方法がわからなかったので、別のライブラリを試してみました。
-
markdown-it は空白があかない！ 良いんじゃないかな･･･
-
javascript 部分以外はまるっと同じです。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<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>
<!-- ◆シンタックスハイライト用 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js"></script>
<!-- ◆VBをシンタックスハイライトする必要があるならこれ↓も入れる -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/languages/vbnet.min.js"></script>
<!-- ◆シンタックスハイライト用 css （好きなテーマを選んで指定する） -->
<!-- ◇https://highlightjs.org/static/demo/ -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/ir-black.min.css">
<script>
$(function() {
// ★markdown-it の設定
var markdownit = window.markdownit({
html : true,
breaks : true,
// highlight.js でハイライトする
highlight: function (str, lang) {
if (lang && hljs.getLanguage(lang)) {
try {
return hljs.highlight(lang, str).value;
} catch (__) {}
}
return ''; // use external default escaping
}
});
// highlight.js の初期処理
hljs.initHighlightingOnLoad();
// ★マークダウンを HTML に変換して再セット
var md = markdownit.render(getHtml("body"));
$("body").html(md);
});
// 比較演算子が < 等になるので置換
function getHtml(selector) {
var html = $(selector).html();
html = html.replace(/</g, '<');
html = html.replace(/>/g, '>');
html = html.replace(/&/g, '&');
return html;
}
</script>
<style>
table { border-collapse: collapse; }
th, td { border:1px solid #999; padding:2px 5px; }
th { background:#e0e0e0; }
</style>
</head>
<body>
# テスト
## HTMLタグを混在させる
HTML タグを混在させたいです。
セルの内容が多い時は、マークダウンのテーブルだと逆に見づらいし…
rowspan とかもできないし
-----
↓ これはマークダウンで書いたテーブルです。
|分類 |ID |商品名 |
|:----------|:----|:--------|
|くだもの |A001 |りんご |
|くだもの |B002 |バナナ |
|やさい |C003 |キャベツ |
↑ これはマークダウンで書いたテーブルです。
↓ これはHTMLタグで書いたテーブルです。
<table>
<tr>
<th>分類</th>
<th>ID</th>
<th>商品名</th>
</tr>
<tr>
<td>くだもの</td>
<td>A001</td>
<td>りんご</td>
</tr>
<tr>
<td>くだもの</td>
<td>B002</td>
<td>バナナ</td>
</tr>
<tr>
<td>やさい</td>
<td>C003</td>
<td>キャベツ</td>
</tr>
</table>
↑ これはHTMLタグで書いたテーブルです。
</body>
</html>
とりあえず markdown-it を使ってみようと思います。
そもそも設定の仕方が悪いんじゃーという場合などはコメント頂ければ…
蛇足：ちなみに highlight.js を設定しているくせにシンタックスハイライトのサンプルが含まれていないのは、Qiitaで「バッククォートの中にバッククォート」がうまく書けなかったからです。