이전, FAQ 같은 페이지를 markdown으로 쓸 수 있도록 하고 있었다 하지만,
런타임으로 컴파일하는 것은 역시 무겁다고 생각하고,
경량화의 일환으로 전처리로 해 보았을 때의 비망록.

사전에 Pandoc에서 Vue의 SFC를 생성하면 좋았다(´ω｀)

설치

$ brew install pandoc

템플릿 준비

이런 느낌의 파일을 준비한다.$body$ 에 markdown으로 쓴 HTML이 삽입되는 느낌

<!-- ./vue-sfc.vue-->
<template>
  <div>$body$</div>
</template>

<script lang="ts">
import { Component, Vue } from "nuxt-property-decorator";

@Component
export default class extends Vue {}
</script>

Pandoc에서 .vue 생성

이러한 Markdown 파일( faq.md )을 예로.

# よくある質問 / FAQ

## 積読本しか登録してはいけないのですか？

이런 식으로 실행하면

$ pandoc -f markdown -t html --template=./vue-sfc.vue ./faq.md > ./FaqContent.vue
# -f ... 入力ファイルのフォーマット
# -t ... 出力のフォーマット
# --template ... テンプレートファイル

이러한 파일이 생성됩니다.

<!-- FaqContent.vue -->
<template>
  <div><h1>よくある質問 / FAQ</h1>
<h2>積読本しか登録してはいけないのですか？</h2><div>
</template>

<script lang="ts">
import { Component, Vue } from "nuxt-property-decorator";

@Component
export default class extends Vue {}
</script>

그리고, 이 컴퍼넌트 ( FaqContent.vue )를 표시하는 페이지에 import하면 OK!

런타임으로 컴파일하지 않아도, 전처리로 갈 수 있었다(´ω｀)

작은 재료

npm run build 때때로 생성

수동으로 실행하는 것은 귀찮기 때문에, package.json 의 scripts 에 추가했다.

{
  "scripts": {
    "dev": "npm run build:md && nuxt",
    "build": "npm run build:md && nuxt generate",
    "build:md": "pandoc -f markdown -t html --template=./vue-sfc.vue ./faq.md > ./FaqContent.vue",
  }
}

.md 내에서 다른 구성 요소 사용

다른 컴퍼넌트를 사용하고 싶을 때는, 템플릿에 추가해 둔다.
이번에는 vue-tweet-embed 을 사용하고 싶었기 때문에 추가.

<template>
  <div>$body$</div>
</template>

<script lang="ts">
import { Component, Vue } from "nuxt-property-decorator";
import { Tweet } from "vue-tweet-embed";

@Component({ components: { Tweet } })
export default class extends Vue {}
</script>

원시 HTML을 표시하려면 입력 형식에 +raw_html를 붙인 것 같습니다.

$ pandoc -f markdown+raw_html -t html --template=./vue-sfc.vue ./faq.md > ./FaqContent.vue

단지, 제대로 변환되지 않는 것이 있으므로, sed 로 치환하거나 하고 있다...

$ pandoc -f markdown+raw_html -t html --template=./vue-sfc.vue ./faq.md | sed 's/&lt;Tweet/<Tweet/g' | sed 's:&gt;</Tweet>:></Tweet>:g' > ./FaqContent.vue

Markdown의 쓰는 방법 등으로 회피할 수 있을지도 모르지만, 잠정적으로 이 대응. .

이상!!

이런것을 만들고 있습니다!!

적독용의 독서 관리 어플리케이션 「적독 하우 매치」를 릴리스했습니다!
적독 하우 매치은 Nuxt.js+Firebase에서 개발 중입니다!



괜찮다면 놀아주세요 ヽ (= '▽`=) 노

요청, 감상, 조언 등이 있다면,
공식 계정( @MemoryLoverz )과 개발자( @kira_puka )까지♪

참고로 한 사이트

Pandoc의 비교적 쉬운 설치 방법 - Qiita

Pandoc을 사용하여 Markdown을 형식화 된 HTML로 변환 - Qiita

Pandoc 사용자 가이드 한국어 버전 - Korean Pandoc User's Association

Pandoc을 사용하여 줄 바꿈이 필요한 곳에 두 개의 공백을 넣으십시오 - Qiita