~/blog/how-to-use-html-dl-tag-in-markdown
Published on

MarkdownでHTMLのdlタグを使う方法

1480文字3分で読めます–––
閲覧数
Authors
  • avatar
    Name
    Shou Arisaka nyapp.buzz/shou
    short bio
    Z世代の情報技術者。Next.jsで自作SNSを個人開発中。

Markdownでは様々なHTMLのためのタグが使えますが、その中でも"dl"タグを使用する方法についてです。Node.jsのパッケージライブラリ、markdown-it-deflistを使用してMarkdown dlタグを使用可能にします。

https://yuis.xsrv.jp/data/2oFs5McsgLFxApW6Z2rUjptwTjMjAmhV.png

markdown-it-deflistでMarkdownで

<

dl>タグを使えるようにします。

https://yuis.xsrv.jp/data/QoWsI0SD4jlW2HufMkQxqsUbCy3LHElM.pngmarkdown-it-deflist - npm

インストール

npm install markdown-it-deflist --save

content変数 ... Pandoc標準の書き方でdlタグを記述していきます。


Term 1

:   Definition 1

Term 2 with *inline markup*

:   Definition 2

        { some code, part of Definition 2 }

    Third paragraph of definition 2.


Pandoc - Pandoc User’s Guide

main.js

var md = require('markdown-it')()
                        .use(require('markdown-it-ins'))
                         .use(require('markdown-it-deflist'))
                            .use(require('markdown-it-mark')) ;

console.log( md.render( content ) )

出力

https://yuis.xsrv.jp/images/ss/ShareX_ScreenShot_1afd0519-eb27-43e3-aabc-c8419e682571.png
<dl>
<dt>Term 1</dt>
<dd>
<p>Definition 1</p>
</dd>
<dt>Term 2 with <em>inline markup</em></dt>
<dd>
<p>Definition 2</p>
<pre><code>  { some code, part of Definition 2 }
</code></pre>
<p>Third paragraph of definition 2.</p>
</dd>
</dl>

以上のように、MarkdownでHTMLのdlタグを使用する方法について紹介しました。

avatar

Shou Arisaka

情報技術者 / Z世代プログラマー / SaaSアプリやSNSを開発
今すぐ話そう!

15歳でWordPressサイトを立ち上げ、ウェブ領域に足を踏み入れる。翌年にはRuby on Railsを用いたマイクロサービス開発に着手し、現在はデジタル庁を支えたNext.jsによるHP作成やSaaS開発のプロジェクトに携わりながら、React.js・Node.js・TypeScriptによるモダンなウェブアプリの個人開発を趣味でも行う。
フロントエンドからバックエンドまで一貫したアジャイルなフルスタック開発を得意とし、ウェブマーケティングや広告デザインも必要に応じて担当、広告運用・SEO対策・データ分析まで行う低コストかつ高品質な顧客体験の提供が好評。
国内外から200万人を超える人々に支えられ、9周年を迎えるITブログ「yuipro」の開発者、デザイナーでありライター。現在ベータ段階の自作SNS「nyapp.buzz」を日本一の国産SNSとするべく奮闘中。

Created with Fabric.js 5.2.4 何かご質問がありますか?