見出し画像
Photo by batayan1020

markdownを活用してテキストを迅速に公開する： イントロダクション

Koji Doi

テキストベースのアウトプットを迅速に成し遂げたいなら、軽量マークアップ言語、特にmarkdownのことはぜひ学んでおきたいところです。


Markdownとは

Markdownは、文章を記述するための軽量マークアップ言語の一つです。

プレーンテキスト形式で手軽に書いた文書からHTMLを生成するために開発されたマークアップ言語です。現在ではHTMLのほかパワーポイント形式やLaTeX形式のファイルへ変換するソフトウェア（コンバータ）も開発されています。

また、コンピューターに処理させるのが簡単であると同時に、そのまま人が読むのも容易いというのがポイントです。

Markdownの利点

  1. シンプルさと速さ:

    • Markdownの文法は非常にシンプルで覚えやすく、基本的な書式設定（見出し、リスト、強調表示など）が非常に迅速に適用できます。

    • 文書を手早く書き上げることができ、装飾が少ないため、内容に集中できます。

  2. 移植性と柔軟性:

    • Markdownファイルはプレーンテキストファイルであるため、どのようなテキストエディタでも開くことができ、OSに依存しません。

    • HTML、PDF、Wordドキュメントなど多様なフォーマットに容易に変換できます。

  3. バージョン管理が容易:

    • プレーンテキストであるため、Gitなどのバージョン管理システムを使用して変更履歴を追跡しやすいです。

    • 複数人での共同編集が容易になります。

  4. 自動化との互換性:

    • プログラムによる処理や、静的サイトジェネレーターとの統合が容易です。

    • 自動的にWebページやブログ投稿に変換するツールと連携しやすいです。

Markdownテキストをウェブページとして公開する方法

素直にHTMLにコンバートする

いくつかツールが知られていますが、コマンドラインから使うものとしてはPandocが良く知られています。markdown/htmlに限らず多様なフォーマットに対応している優れモノのソフトです。

また、エディタとして最近のデファクトスタンダードになりつつあるVScodeでは、エディタ内でmarkdownからHTMLへのコンバートが可能です。

MarkdownテキストをHTMLテキストにそのまま埋め込む

Javascriptのライブラリの助けを借りれば、HTMLソースの中に直接markdownテキストを埋め込み、そのままウェブブラウザで表示させることも可能です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Markdown to HTML Example</title>
    <script src="https://cdn.jsdelivr.net/npm/markdown-it@12.0.3/dist/markdown-it.min.js"></script>
</head>
<body>
    <div id="result"></div>
    <script>
        // Markdown-itライブラリを初期化
        var md = window.markdownit();

        // Markdownのサンプルテキスト
        var markdownText = '# Hello Markdown!\n\nThis is a simple example of Markdown conversion.\n\n- Item 1\n- Item 2\n- Item 3';

        // MarkdownをHTMLに変換
        var result = md.render(markdownText);

        // HTMLコンテンツをdiv要素にセット
        document.getElementById('result').innerHTML = result;
    </script>
</body>
</html>

上に示したソース中の`var mardownText = `の箇所に所定のmarkdownテキストを書き込めばOKです。

HTML以外のアウトプットもできる

markdownは極めて広く普及しており、「ウェブページ」以外にもいろいろな形で利用できます。

markdownから「スライド」を作る

markdownからPDFを作る

最後に

実のところ、ここまでに書いてきたことはイントロに過ぎず、本当に述べたいことはこの先にあったのですが、既にだいぶん大容量な文章になってしまっているので、今回はいったん筆をおきます。
後日続きを書きたいと思いますので、お待ちください。


この記事が気に入ったらサポートをしてみませんか？