A. MD-Plugins are Markdown-it and Vite plugins that help turn Markdown into application-ready content. They cover things like headings, links, frontmatter, images, code blocks, examples, and Q-Press documentation sites.

A. Yes. The individual Markdown-it plugins and direct Vite plugins can be used in non-Quasar projects. For example, @md-plugins/vite-md-plugin and @md-plugins/vite-examples-plugin can be used in Vue/Vite projects, and the @md-plugins/md-plugin-* packages can be used anywhere you configure MarkdownIt.

The Quasar-specific limitation only applies to app extensions, such as Q-Press. Those app extensions target Quasar CLI Vite projects and are not intended for Webpack or JavaScript-only Quasar projects.

A. Use @md-plugins/quasar-app-extension-q-press if you want the full Q-Press documentation site experience inside a Quasar CLI Vite project.

Use @md-plugins/vite-md-plugin if you want Markdown pages or content in a Vue/Vite app without installing the Q-Press app extension.

Use the individual @md-plugins/md-plugin-* packages when you already own the MarkdownIt setup and only need specific behavior.

A. Install the package that matches your integration path. For direct Vite plugin usage:

pnpm add @md-plugins/vite-md-plugin

For Q-Press in a Quasar CLI Vite project:

quasar ext add @md-plugins/q-press

Refer to the installation section for each package when you need package-specific options.

A. Update the app extension package, then invoke it so the generated files can be refreshed:

pnpm up @md-plugins/quasar-app-extension-q-press
quasar ext invoke @md-plugins/q-press

Choose Overwrite All if you want the generated src/.q-press files to match the current stable templates.

A. No. Q-Press targets Quasar CLI Vite projects. The direct Markdown-it and Vite plugin packages are the right path for non-Quasar Vite projects.

A. Use the image plugin and pass the class through its options:

import MarkdownIt from 'markdown-it'
import { imagePlugin } from '@md-plugins/md-plugin-image'

const md = new MarkdownIt()

md.use(imagePlugin, {
  imageClass: 'custom-image-class',
})

A. Use the frontmatter plugin and read the generated frontmatter from the MarkdownIt environment:

import MarkdownIt from 'markdown-it'
import { frontmatterPlugin } from '@md-plugins/md-plugin-frontmatter'

const md = new MarkdownIt()

md.use(frontmatterPlugin, {
  grayMatterOptions: {
    excerpt: true,
    excerpt_separator: '<!-- more -->',
  },
  renderExcerpt: true,
})

const env = {}
const html = md.render(code, env)

console.log(env.frontmatter)

A. Use the codeblocks plugin. It can render syntax-highlighted code blocks, copy buttons, tabbed code blocks, line highlighting, and code-group metadata:

import MarkdownIt from 'markdown-it'
import { codeblocksPlugin } from '@md-plugins/md-plugin-codeblocks'

const md = new MarkdownIt()

md.use(codeblocksPlugin, {
  defaultLang: 'javascript',
  containerComponent: 'MarkdownPrerender',
  copyButtonComponent: 'MarkdownCopyButton',
})

A. Use the link plugin to render Markdown links as Vue routing components:

import MarkdownIt from 'markdown-it'
import { linkPlugin } from '@md-plugins/md-plugin-link'

const md = new MarkdownIt()

md.use(linkPlugin, {
  linkTag: 'RouterLink',
  linkToKeyword: 'to',
  pageScript: 'import { RouterLink } from "vue-router"',
})

A. Confirm that the package is installed, the plugin is registered with MarkdownIt or Vite, and your generated Q-Press files are current. If you recently upgraded Q-Press, run:

quasar ext invoke @md-plugins/q-press

Choose Overwrite All when you want the generated files to match the latest templates.

A. The browser can paint server-rendered HTML before the site’s external CSS is available. Q-Press includes critical first-paint sizing for Quasar icons, but project-owned images also need intrinsic width and height attributes so the browser can reserve the correct space immediately:

<img src="/app-logo.svg" alt="Project logo" class="hero-logo" width="120" height="120" />

Use dimensions with the image’s real aspect ratio; responsive CSS can still change its displayed size. After upgrading Q-Press, run quasar ext invoke @md-plugins/q-press, choose Overwrite All to refresh generated templates, and rebuild the site.

A. Open an issue in the MD-Plugins repository and include the package name, version, reproduction steps, expected result, and actual result.

A. Start with the package documentation and FAQ. If you are blocked or found a bug, open a GitHub issue with enough detail for someone else to reproduce the problem.