LoginSignup
17
14

More than 5 years have passed since last update.

@sk_3122

マークダウンを javascript で変換

Last updated at Posted at 2017-02-02

マークダウンを 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で「バッククォートの中にバッククォート」がうまく書けなかったからです。

17
14
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
17
14