2023-07-11:レバテックフリーランス様のサイトで当サイトがご紹介されました
コーディングの勉強

マークダウンコードをpdfに書きだす方法

 

こんにちは、mito(@mito_works)です。

mito
mito
今回は、マークダウン記法で書いたものをpdfに書きだす方法を解説していきます。
momo
momo
テキストエディタのVisual Studio Codeを使うとプラグインで簡単にpdf化できるよ！

簡単なメモや議事録、資料作りもVisual Studio Codeを使ってマークダウン記法でできると効率的だと思い、実験中です。

それではいってみましょう～。

 

マークダウンとは何か

前回こちらの記事で、マークダウン記法の書き方については書いています。

よく使うマークダウン記法まとめ 今回は、そんな知っていると案外使いどころの多いマークダウン記法についてよく使うものをまとめました。 それで...

 

mito
mito
上記の記事を見ていただくとわかると思いますが、HTML似ていますが、タグを書くことなく簡略化した表現で文字の装飾ができます。
momo
momo
マークアップは「<h3>見出し3</h3>｣といったタグと文字列を書き、文字列を装飾しますが、マークダウンは「***」と入力するだけでよいよ！
mito
mito
つまり、キーボードのタイピング数が減って効率的ですね～。

あまり激しい装飾はできませんが、基本のシンプルな装飾であれば、マークダウン記法で事足りることが多いです。

 

書くときはマークダウン記法→共有はプレビュー画面

そんなとても効率的に書くことのできるマークダウンですが、通常の仕様書やメモなどのドキュメントであれば、マークダウンのまま共有…ではなく、プレビュー画面を共有したいとなります。

momo
momo
そこで登場するのがVisual Studio Codeの拡張機能Markdown PDF
mito
mito
「書くときはマークダウン記法で書き、共有はpdfで書きだして共有する」を実現してくれる拡張機能です。

pdf書き出しを行うMarkdown PDFの使い方

momo
momo
それではMarkdown PDFのインストールからpdf書き出しまでやってみよう！
  • STEP1
    Markdown PDFをインストール
    Visual Studio Codeを開き、拡張機能の検索窓に「Markdown PDF」と入力し、検索します。

    該当ものをクリックし、インストールします。

  • STEP2
    Markdown PDFを使って対象ファイルをpdf化
    pdfとして書き出したいmdファイル(マークダウン記法で書いたファイル)を選択し、command+shft+pを押し、コマンドパレットを出します。

    コマンドパレット上でMarkdown PDFを選択。

    mito
    mito
    書き出したいファイルの拡張子がmdであることも確認してください。

    ↓コマンドパレット上で選択すると自動でpdf化がはじまります。

  • STEP3
    pdfを確認
    出来上がったpdfを確認します。

    ↓フォルダで見ると以下のようなイメージ

    ↓test.pdfの中身は以下

  • STEP3
    mito
    mito
    出来上がったpdfをみて微妙な位置で切れてしまっているので改ページしたいな…ということ、あると思います

    その際は、改ページしたい前の行に以下を入れます。

    <div style="page-break-before:always"></div>

まとめ

いかがだったでしょうか。もっと工夫をすると、色を変えたり、背景画像の差し込みをしたりなどいろいろできると思います。

mito
mito
夢が広がりますね！
マークダウン
ABOUT ME
mito
こんにちは！mitoです。 フロントエンド開発、デザイン全般をやっているクリエイターです。 学ぶことと教えることが好きです。 子育てをする中で、自分の生活に働き方を合わせたいと思うようになり、2020年4月からフリーランスになりました。 好奇心旺盛でやりたいこと多め、ワクワクすると止まれない性格です。 同じように一緒にチャレンジする人の背中そっと押せたり、励ましあえるようなブログになるといいなと思っています。
RELATED POST