SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

DeveloperZine(デベロッパージン)- エンジニアの意思決定を支える技術情報メディア ProductZine

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

マンガで分かるプログラミング用語辞典

「マークダウン」
~マンガでプログラミング用語解説

マンガで分かるプログラミング用語辞典(147)

解説

 「マークダウン」(Markdown)は、軽量マークアップ言語の一つです。HTMLやXMLといったマークアップ言語よりも簡単に書くことができます。マークダウンは、実際に書いた文章と、出力される見た目が近いために、普通に文章を書く感覚で記述することができます。

 マークダウンは、英語圏で電子メールを装飾する方法を参考にして作られました。そのため、改行が1つの場合は無視するといった、メールの文章の慣習が反映されています。

 この軽量マークアップ言語は、方言が多いことも特徴です。Webサイトやブログなどの文章の装飾方法でマークダウンを採用しているところがあり、それぞれの特徴に合わせたカスタマイズされているためです。有名なところでは、ソースコードをホスティングする「GitHub」の文章は、「GitHub Flavored Markdown」(GFM)というマークダウンの派生バージョンを利用しています。

サンプル

 「マークダウン」のサンプルです。「markdown-it」を利用しています。ファイルはUTF-8で保存してください。検証はGoogle Chromeで行なっています。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>「マークダウン」のサンプル</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/8.4.2/markdown-it.min.js"></script>
        <style>
textarea, button {width: 100%;}
textarea {height: 10em;}
blockquote {border-left: solid 4px #06a; color: #06a;
    margin: 0; padding-left: 1em;}
        </style>
    </head>
    <body>
        <textarea id="src">
# 見出し1
## 見出し2
### 見出し3

本文の文章1.
改行1行は無視。

改行2行で改行。
本文の文章2.

---

* 箇条書き1
  * 箇条書き1-1
  * 箇条書き1-2

1. 番号付きリスト
2. 番号付きリスト
3. 番号付きリスト

> 引用ブロック1
> 
> 引用ブロック2
</textarea>
        <button onClick="exec()">変換</button>
        <div id="dst"></div>

        <script>
function exec() {
    // 変数の初期化
    const src = document.getElementById('src');
    const dst = document.getElementById('dst');
    const srcTxt = src.value;
    const md = window.markdownit();

    // 変換と出力
    dst.innerHTML = md.render(srcTxt);
}
        </script>
    </body>
</html>
表示結果
表示結果
フィードバックお待ちしております!

 ご感想、解説して欲しい用語、解説内容のアドバイスなどございましたら、FacebookTwitterなどでお気軽に編集部までお寄せください。よろしくお願いいたします。

この記事は参考になりましたか?

連載通知を行うには会員登録(無料)が必要です。
既に会員の方はを行ってください。
マンガで分かるプログラミング用語辞典連載記事一覧

もっと読む

この記事の著者

柳井 政和(ヤナイ マサカズ)

クロノス・クラウン合同会社 代表社員http://crocro.com/オンラインソフトを多数公開。プログラムを書いたり、ゲームを作ったり、記事を執筆したり、マンガを描いたり、小説を書いたりしています。「めもりーくりーなー」でオンラインソフト大賞に入賞。最近は、小説家デビューして小説も書いています(『裏切りのプログラム』他)。面白いことなら何でもOKのさすらいの企画屋です。 

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

CodeZine(コードジン)
https://codezine.jp/article/detail/11316 2019/04/02 11:00

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー