vite-plugin-json-md

vite-plugin-json-md

A Vite plugin that processes markdown content in JSON/JSON5 files. Particularly useful for i18n applications where translation files need to store complex HTML markup in JSON format. Instead of writing HTML directly in JSON files, you can use more readable markdown syntax or include external markdown files.

Features

• Process inline markdown in JSON/JSON5 files
• Include external markdown files
• Convert JSON5/JSONC to standard JSON
• Minification options
• Perfect for i18n translation files containing rich text content
• Support for both inline markdown and external markdown files
• Open links in new tabs with target="_blank" rel="noopener noreferrer"

Installation

# npm
npm install vite-plugin-json-md -D

# yarn
yarn add vite-plugin-json-md -D

# pnpm
pnpm add vite-plugin-json-md -D

Usage

Basic Configuration

Add the plugin to your vite.config.js:

import { defineConfig } from 'vite'
import { jsonMdPlugin } from 'vite-plugin-json-md'

export default defineConfig({
  plugins: [
    jsonMdPlugin({
      sourceDir: 'src/locales',
      inputFiles: ['en/*.json5', 'fr/*.json5'],
      markdownDir: 'src/locales/md',
      outputDir: 'src/locales/out',
      parseMarkdown: true,
      convertToJson: true,
      externalLinks: true
    })
  ]
})

Example with i18n

Input translation file (src/locales/en/messages.json5):

{
  "welcome": {
    // Inline markdown
    "title": "md:# Welcome to our platform",
    "description": "md:We offer:\n\n- Feature One\n- Feature Two\n- Feature Three",
    
    // External markdown file
    "privacyPolicy": "md:@legal/privacy-policy.md",
    
    // Regular text (no processing)
    "simpleText": "This is regular text without markdown"
  },
  "pricing": {
    "title": "md:## Flexible Pricing Plans",
    "description": "md:Choose the plan that works best for you:\n\n- Basic: $9/mo\n- Pro: $19/mo\n- Enterprise: Contact us"
  }
}

External markdown file (src/locales/md/legal/privacy-policy.md):

# Privacy Policy

We take your privacy seriously:

1. We collect minimal data
2. Your data is encrypted
3. We never share your information

[Learn more about our terms](/terms)

Output file (src/locales/out/en/messages.json):

{
  "welcome": {
    "title": "<h1>Welcome to our platform</h1>",
    "description": "<ul><li>Feature One</li><li>Feature Two</li><li>Feature Three</li></ul>",
    "privacyPolicy": "<h1>Privacy Policy</h1><p>We take your privacy seriously:</p><ol><li>We collect minimal data</li><li>Your data is encrypted</li><li>We never share your information</li></ol><p><a target=\"_blank\" rel=\"noopener noreferrer\" href=\"/terms\">Learn more about our terms</a></p>",
    "simpleText": "This is regular text without markdown"
  },
  "pricing": {
    "title": "<h2>Flexible Pricing Plans</h2>",
    "description": "<p>Choose the plan that works best for you:</p><ul><li>Basic: $9/mo</li><li>Pro: $19/mo</li><li>Enterprise: Contact us</li></ul>"
  }
}

Using with Vue-i18n:

import { createI18n } from 'vue-i18n'
import en from './locales/out/en/messages.json'

const i18n = createI18n({
  messages: { en }
})

export default i18n

Template usage:

<template>
  <div v-html="$t('welcome.title')" />
  <div v-html="$t('welcome.description')" />
  <div v-html="$t('welcome.privacyPolicy')" />
</template>

Options

Option	Type	Default	Description
sourceDir	string	""	Source directory containing JSON/JSON5 files
inputFiles	string[]	-	Glob patterns for input files
markdownDir	string	-	Directory containing external markdown files
outputDir	string	-	Output directory for processed files
parseMarkdown	boolean	true	Whether to parse markdown into HTML
convertToJson	boolean	false	Convert JSON5/JSONC to standard JSON
minify	boolean	false	Minify output files
externalLinks	boolean	false	Add target="_blank" rel="noopener noreferrer" to all links

Markdown Processing

• Inline markdown: Use md: prefix
• External markdown files: Use md:@filename.md
• Regular strings: No processing

License

MIT License © 2024 Ruslan Makarov