13
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

updated at

マークダウンを javascript で変換

マークダウンを 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);

    });

    // 比較演算子が &lt; 等になるので置換
    function getHtml(selector) {
        var html = $(selector).html();
        html = html.replace(/&lt;/g, '<');
        html = html.replace(/&gt;/g, '>');
        html = html.replace(/&amp;/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);

    });

    // 比較演算子が &lt; 等になるので置換
    function getHtml(selector) {
        var html = $(selector).html();
        html = html.replace(/&lt;/g, '<');
        html = html.replace(/&gt;/g, '>');
        html = html.replace(/&amp;/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で「バッククォートの中にバッククォート」がうまく書けなかったからです。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
13
Help us understand the problem. What are the problem?