マークダウンファイルからPDFの作成

使用したパッケージ

www.npmjs.com

インストール

$ npm i md-to-pdf

実行コマンド

README.mdの内容をresume.pdfの内容で書き出しを行う場合

{
  "scripts": {
    "pdf": "cat README.md | md-to-pdf --stylesheet https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/2.10.0/github-markdown.min.css --body-class markdown-body > resume.pdf"
  }
}

設定できるオプションについて

f:id:jackswim3411:20200610002626p:plain

# マークダウンファイルからHTMLファイルにマークダウンを読み込んでWebページに表示

HTMLファイルの作成

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./style.css"> <!--適応させるcssの読み込み -->
  <script src="./index.js" defer></script> <!--適応させるjsの読み込み -->
  <title>職務経歴書マークダウン出力</title>
</head>
<body>
  <div id="mdContainer"></div> <!--マークダウンファイルを適応させる場所 -->
</body>
</html>

cssの読み込み

pcのライトテーマ・ダークテーマによって切り分けを行いたい思ったため、Water.cssを使用。

その他のclass名なしで使うことができるcss フレームワークについては以下を参照。

www.webcreatorbox.com

JavaScript記載

マークダウン → HTMLの変換
ファイル読み込み

の2点を行うため、「marked, axios」をインストール。

www.npmjs.com

コード

import marked from 'marked'
import axios from 'axios'

axios.get('../README.md') // 出力を行いたいファイルの場所
  .then(response => document.getElementById('mdContainer').innerHTML = marked(response.data));