Vite2+Vue3を使用してMarkdownドキュメントをレンダリングする練習

'path' からパスをインポートします。
'fs' から fs をインポートします。
'marked' から marked をインポートします。

const mdToJs = str => {
  const コンテンツ = JSON.stringify(marked(str));
  `export default ${content}` を返します。
};

エクスポート関数md() {
  戻る {
    configureServer: [ // 開発用 async ({ app }) => {
        app.use(async (ctx, next) => {
          // .md という拡張子のファイルを取得し、それを js ファイルに変換します if (ctx.path.endsWith('.md')) {             
            ctx.type = 'js';
            定数 filePath = path.join(process.cwd(), ctx.path);
            ctx.body = mdToJs(fs.readFileSync(filePath).toString());
          } それ以外 {
            次の()を待ちます。
          }
        });
      },
    ]、
    変換: [{ // ロールアップ用
      テスト: context => context.path.endsWith('.md'),
      変換: ({ code }) => mdToJs(code)
    }]
  };
}

'./md' から {md} をインポートします。

エクスポートデフォルト{
  プラグイン: [md()]
};

<テンプレート>
<記事 v-html="md" />
</テンプレート>

<script lang="ts">
'./xxx.md' から md をインポートします
エクスポートデフォルト{
設定（）{

  {md} を返す
  
  }
}

npm と vite-plugin-markdown

const mdPlugin = require('vite-plugin-markdown')

エクスポートデフォルト{
  プラグイン: [
    mdPlugin.plugin({
      モード: ['html'],
    })
  ]
}

---
タイトル: 素晴らしいタイトル
説明: この素晴らしいコンテンツについて説明してください
タグ:
  - "素晴らしい"
  - "素晴らしい"
  - 「すごい」
---
# これはすごい
Vite は、開発中にネイティブ ES モジュールのインポートを介してコードを提供し、本番環境用に Rollup とバンドルする、独自の Web 開発ビルド ツールです。

'./contents/the-doc.md' から { 属性 } をインポートします。

console.log(attributes) //=> { title: '素晴らしいタイトル', description: 'この素晴らしいコンテンツを説明してください', tags: ['素晴らしい', '素晴らしい', '素晴らしい'] }

'./contents/the-doc.md' から { html } をインポートします。

コンソール.log(html) 
//=> "<h1>これは素晴らしい</h1><p>ite は、開発中にネイティブ ES モジュールのインポートを介してコードを提供し、本番環境用に Rollup とバンドルする、独自の Web 開発ビルド ツールです。</p>"

# バイト

Vite は、開発中にネイティブ ES モジュールのインポートを介してコードを提供し、本番環境用に Rollup とバンドルする、独自の Web 開発ビルド ツールです。

＃＃ 状態

＃＃ はじめる

# 注記

'./contents/the-doc.md' から { toc } をインポートします。

コンソール.log(toc)
//=> [{ レベル: '1', コンテンツ: 'vite' }, { レベル: '2', コンテンツ: 'ステータス' }, { レベル: '2', コンテンツ: 'はじめに' }, { レベル: '1', コンテンツ: 'メモ' },]

'react' から React をインポートします
'./contents/the-doc.md' から { ReactComponent } をインポートします。

関数MyReactApp() {
  戻る （
    <div>
      <Reactコンポーネント />
    </div>
}

<テンプレート>
  <記事>
    <マークダウンコンテンツ />
  </記事>
</テンプレート>

<スクリプト>
'./contents/the-doc.md' から { VueComponent } をインポートします。

エクスポートデフォルト{
  コンポーネント:
    マークダウンコンテンツ: VueComponent
  }
};
</スクリプト>