@md-plugins/quasar-app-extension-q-press 0.1.0-beta.2 → 0.1.0-beta.21

package/src/templates/init/src/components/page-parts/releases/PackageReleases.vue

@@ -0,0 +1,191 @@
+<template>
+  <div>
+    <q-input
+      v-model="search"
+      dense
+      square
+      borderless
+      color="white"
+      placeholder="Search..."
+      clearable
+      class="q-mx-md"
+    >
+      <template #prepend>
+        <q-icon :name="mdiMagnify" />
+      </template>
+    </q-input>
+    <q-separator />
+    <q-splitter :model-value="20" :limits="[14, 90]" class="release__splitter">
+      <template #before>
+        <q-scroll-area>
+          <q-tabs
+            v-model="selectedVersion"
+            vertical
+            active-color="primary"
+            active-bg-color="blue-1"
+            indicator-color="primary"
+          >
+            <q-tab
+              v-for="releaseInfo in filteredReleases"
+              :key="releaseInfo.label"
+              :name="releaseInfo.label"
+            >
+              <div class="q-tab__label">{{ releaseInfo.version }}</div>
+              <small class="text-grey-7">{{ releaseInfo.date }}</small>
+            </q-tab>
+          </q-tabs>
+        </q-scroll-area>
+      </template>
+      <template #after>
+        <q-tab-panels
+          v-model="selectedVersion"
+          animated
+          transition-prev="slide-down"
+          transition-next="slide-up"
+          class="releases-container"
+        >
+          <q-tab-panel
+            v-for="releaseInfo in filteredReleases"
+            :key="releaseInfo.label"
+            :name="releaseInfo.label"
+            class="q-pa-none"
+          >
+            <q-scroll-area>
+              <div class="q-pa-md" v-html="currentReleaseBody" />
+            </q-scroll-area>
+          </q-tab-panel>
+        </q-tab-panels>
+      </template>
+    </q-splitter>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { mdiMagnify } from '@quasar/extras/mdi-v7'
+
+import sanitize from './sanitize'
+import parseMdTable from './md-table-parser'
+
+export interface ReleaseInfo {
+  version: string
+  date: string
+  body: string
+  label: string
+}
+
+const props = withDefaults(
+  defineProps<{
+    latestVersion?: string | undefined
+    releases?: ReleaseInfo[]
+    repoUrl?: string
+  }>(),
+  {
+    releases: () => [],
+    repoUrl: 'https://github.com/md-plugins/md-plugins',
+  },
+)
+
+const search = ref('')
+const selectedVersion = ref<string | undefined>(props.latestVersion)
+
+watch(
+  () => props.latestVersion,
+  (val) => {
+    selectedVersion.value = val
+  },
+)
+
+const filteredReleases = computed(() => {
+  if (search.value !== '') {
+    const val = search.value.toLowerCase()
+
+    return props.releases.filter((release) => release.body.toLowerCase().includes(val))
+  }
+
+  return props.releases
+})
+
+function escapeRegExp(value: string): string {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+}
+
+function parse(body: string): string {
+  let content = sanitize(body) + '\n'
+
+  if (search.value !== '') {
+    content = content.replace(
+      new RegExp(`(${escapeRegExp(search.value)})`, 'gi'),
+      '<span class="bg-accent text-white">$1</span>',
+    )
+  }
+
+  content = content
+    .replace(/### ([\S ]+)/g, '<div class="text-h6">$1</div>')
+    .replace(/## ([\S ]+)/g, '<div class="text-h5">$1</div>')
+    .replace(/# ([\S ]+)/g, '<div class="text-h4">$1</div>')
+    .replace(/\*\*([\S ]*?)\*\*/g, '<strong>$1</strong>')
+    .replace(/\*([\S ]*?)\*/g, '<em>$1</em>')
+    .replace(/```([\S]+)/g, '<pre class="markdown-code release__code"><code>')
+    .replace(/```\n/g, '</code></pre>')
+    .replace(/`(.*?)`/g, '<code class="markdown-token">$1</code>')
+    .replace(
+      /#([\d]+)/g,
+      `<a class="markdown-link" href="${props.repoUrl}/issues/$1" target="_blank">#$1</a>`,
+    )
+    .replace(/^&gt; ([\S ]+)$/gm, '<div class="release__blockquote">$1</div>')
+    .replace(
+      /\[([\S ]*?)\]\((\S*?)\)/g,
+      '<a class="markdown-link" href="$2" target="_blank">$1</a>',
+    )
+    .replace(/^ {2}[-*] ([\S .]+)$/gm, '<li class="q-pl-md">$1</li>')
+    .replace(/^[-*] ([\S .]+)$/gm, '<li>$1</li>')
+    .replace(/<\/li>[\s\n\r]*<li/g, '</li><li')
+    .replace(/(<li(?: class="[^"]*")?>.*?<\/li>)+/g, '<ul class="release__list">$&</ul>')
+    .replace(/\n/g, '<br>')
+
+  return content.includes('| -') ? parseMdTable(content) : content
+}
+
+const currentReleaseBody = computed(() => {
+  const release = props.releases.find((entry) => entry.label === selectedVersion.value)
+
+  return release ? parse(release.body) : ''
+})
+</script>
+
+<style lang="scss">
+.release__splitter .q-scrollarea {
+  height: 600px;
+}
+
+.release__body {
+  white-space: pre-line;
+
+  .q-markup-table {
+    white-space: normal;
+  }
+}
+
+.release__list {
+  margin: 8px 0 16px;
+  padding-left: 28px;
+
+  li {
+    margin: 4px 0;
+    padding-left: 4px;
+  }
+}
+
+.release__blockquote {
+  background: rgba($primary, 0.05);
+  border: 1px solid $primary;
+  padding: 4px 8px;
+  border-radius: $generic-border-radius;
+}
+
+.release__code {
+  padding: 4px;
+  margin: 8px;
+}
+</style>

package/src/templates/init/src/components/page-parts/releases/md-table-parser.ts

@@ -0,0 +1,52 @@
+function getTable(rows: string[]): string {
+  const header = (rows[0] ?? '')
+    .split('|')
+    .filter((col) => col)
+    .map((col) => `<th class="text-left">${col.trim()}</th>`)
+    .join('')
+
+  const body = rows
+    .slice(2)
+    .map(
+      (row) =>
+        '<tr>' +
+        row
+          .split('|')
+          .filter((col) => col)
+          .map((col) => `<td>${col.trim()}</td>`)
+          .join('') +
+        '</tr>',
+    )
+    .join('')
+
+  return (
+    '<div class="q-markup-table q-table__container q-table__card ' +
+    'q-table--horizontal-separator q-table--flat q-table--bordered ' +
+    'q-table--no-wrap q-table--dense">' +
+    `<table class="q-table"><thead>${header}</thead>` +
+    `<tbody>${body}</tbody></table></div>`
+  )
+}
+
+export default function parseMdTable(raw: string): string {
+  let content = ''
+  let tableRows: string[] = []
+
+  for (const row of raw.split('\n')) {
+    if (row.indexOf('|') > -1) {
+      tableRows.push(row.trim())
+    } else {
+      if (tableRows.length > 0) {
+        content += getTable(tableRows) + '\n'
+        tableRows = []
+      }
+      content += row + '\n'
+    }
+  }
+
+  if (tableRows.length > 0) {
+    content += getTable(tableRows) + '\n'
+  }
+
+  return content
+}

package/src/templates/init/src/components/page-parts/releases/sanitize.ts

@@ -0,0 +1,132 @@
+type AttributeSanitizer = (value: string | null) => string
+type AllowedAttributes = Record<string, AttributeSanitizer>
+type AllowedTags = Record<string, AllowedAttributes>
+
+function unconstrained(value: string | null): string {
+  return value ?? ''
+}
+
+class HtmlWhitelistedSanitizer {
+  private readonly doc: Document
+  private readonly allowedTags: AllowedTags
+  private readonly allowedCss: string[]
+
+  constructor(
+    private readonly escape: boolean,
+    tags?: AllowedTags,
+    css?: string[],
+    urls: string[] = ['http://', 'https://'],
+  ) {
+    this.doc = document.implementation.createHTMLDocument()
+    this.allowedTags = tags ?? HtmlWhitelistedSanitizer.getDefaultTags(urls)
+    this.allowedCss = css ?? ['border', 'margin', 'padding']
+  }
+
+  static makeUrlSanitizer(allowedUrls: string[]): AttributeSanitizer {
+    return (value) => {
+      if (value === null) {
+        return ''
+      }
+
+      return allowedUrls.some((url) => value.startsWith(url)) ? value : ''
+    }
+  }
+
+  static mergeMap(...maps: AllowedAttributes[]): AllowedAttributes {
+    return Object.assign({}, ...maps)
+  }
+
+  private static getDefaultTags(urls: string[]): AllowedTags {
+    const globalAttributes = {
+      dir: unconstrained,
+      lang: unconstrained,
+      title: unconstrained,
+    }
+    const urlSanitizer = HtmlWhitelistedSanitizer.makeUrlSanitizer(urls)
+
+    return {
+      a: HtmlWhitelistedSanitizer.mergeMap(globalAttributes, {
+        download: unconstrained,
+        href: urlSanitizer,
+        hreflang: unconstrained,
+        ping: urlSanitizer,
+        rel: unconstrained,
+        target: unconstrained,
+        type: unconstrained,
+      }),
+      img: HtmlWhitelistedSanitizer.mergeMap(globalAttributes, {
+        alt: unconstrained,
+        height: unconstrained,
+        src: urlSanitizer,
+        width: unconstrained,
+      }),
+      p: globalAttributes,
+      div: globalAttributes,
+      span: globalAttributes,
+      br: globalAttributes,
+      b: globalAttributes,
+      i: globalAttributes,
+      u: globalAttributes,
+    }
+  }
+
+  sanitizeString(input: string): string {
+    const div = this.doc.createElement('div')
+    div.innerHTML = input
+
+    return (this.sanitizeNode(div) as HTMLElement).innerHTML
+  }
+
+  private sanitizeNode(node: Node): Node {
+    const nodeName = node.nodeName.toLowerCase()
+
+    if (nodeName === '#text') {
+      return node
+    }
+
+    if (nodeName === '#comment') {
+      return this.doc.createTextNode('')
+    }
+
+    if (this.allowedTags[nodeName] === void 0) {
+      return this.doc.createTextNode(this.escape && node instanceof Element ? node.outerHTML : '')
+    }
+
+    const source = node as HTMLElement
+    const copy = this.doc.createElement(nodeName)
+    const allowedAttributes = this.allowedTags[nodeName]
+
+    for (let index = 0; index < source.attributes.length; index++) {
+      const attr = source.attributes.item(index)
+      const sanitizer = attr !== null ? allowedAttributes[attr.name] : undefined
+
+      if (attr !== null && sanitizer !== void 0) {
+        copy.setAttribute(attr.name, sanitizer(source.getAttribute(attr.name)))
+      }
+    }
+
+    for (const cssProperty of this.allowedCss) {
+      copy.style.setProperty(cssProperty, source.style.getPropertyValue(cssProperty))
+    }
+
+    while (source.childNodes.length > 0) {
+      const firstChild = source.childNodes[0]
+      if (firstChild === void 0) {
+        break
+      }
+
+      const child = source.removeChild(firstChild)
+      if (child === void 0) {
+        break
+      }
+      copy.appendChild(this.sanitizeNode(child))
+    }
+
+    return copy
+  }
+}
+
+export default function runSanitizer(html: string): string {
+  const parser = new HtmlWhitelistedSanitizer(true)
+  return parser.sanitizeString(html)
+}

package/src/templates/init/src/markdown/__elements.md

@@ -349,7 +349,7 @@ sudo apt autoremove
    { name: 'diff' }
  ]
 
-@@ -20,6 +22,12 @@ loadLanguages(langList.map(l => l.name))
+@@ -20,6 +22,12 @@ const highlighter = await createHighlighter({
 
  const langMatch = langList.map(l => l.aliases || l.name).join('|')
 
@@ -388,7 +388,7 @@ sudo apt autoremove
 
 -function highlight (content, attrs) {
 -  const { lang, numbered } = attrs
--  const highlightedText = prism.highlight(content, prism.languages[ lang ], lang)
+-  const highlightedText = highlighter.codeToHtml(content, { lang })
 +const magicCommentRE = / *\/\/\[! (?<klass>[\w-]+)\] */
 +const magicCommentGlobalRE = new RegExp(magicCommentRE, 'g')
 
@@ -469,7 +469,7 @@ const x = {
 | Prop name    | Description                                                                                                       |
 | ------------ | ----------------------------------------------------------------------------------------------------------------- |
 | `app`        | Vue app instance                                                                                                  |
-| `router`     | Instance of Vue Router from 'src/router/index.js'                                                                 |
+| `router`     | Instance of Vue Router from '@/router/index.js'                                                                   |
 | `store`      | Instance of Pinia - **store only will be passed if your project uses Pinia (you have src/stores)**                |
 | `ssrContext` | Available only on server-side, if building for SSR. [More info](/quasar-cli-vite/developing-ssr/ssr-context)      |
 | `urlPath`    | The pathname (path + search) part of the URL. It also contains the hash on client-side.                           |
@@ -481,7 +481,7 @@ const x = {
 | Prop name    | Description                                                                                                       |
 | :----------- | :---------------------------------------------------------------------------------------------------------------- |
 | `app`        | Vue app instance                                                                                                  |
-| `router`     | Instance of Vue Router from 'src/router/index.js'                                                                 |
+| `router`     | Instance of Vue Router from '@/router/index.js'                                                                   |
 | `store`      | Instance of Pinia - **store only will be passed if your project uses Pinia (you have src/stores)**                |
 | `ssrContext` | Available only on server-side, if building for SSR. [More info](/quasar-cli-vite/developing-ssr/ssr-context)      |
 | `urlPath`    | The pathname (path + search) part of the URL. It also contains the hash on client-side.                           |
@@ -493,7 +493,7 @@ const x = {
 |    Prop name |                                                                                                       Description |
 | -----------: | ----------------------------------------------------------------------------------------------------------------: |
 |        `app` |                                                                                                  Vue app instance |
-|     `router` |                                                                 Instance of Vue Router from 'src/router/index.js' |
+|     `router` |                                                                   Instance of Vue Router from '@/router/index.js' |
 |      `store` |                Instance of Pinia - **store only will be passed if your project uses Pinia (you have src/stores)** |
 | `ssrContext` |      Available only on server-side, if building for SSR. [More info](/quasar-cli-vite/developing-ssr/ssr-context) |
 |    `urlPath` |                           The pathname (path + search) part of the URL. It also contains the hash on client-side. |
@@ -505,7 +505,7 @@ const x = {
 |  Prop name   |                                                    Description                                                    |
 | :----------: | :---------------------------------------------------------------------------------------------------------------: |
 |    `app`     |                                                 Vue app instance                                                  |
-|   `router`   |                                 Instance of Vue Router from 'src/router/index.js'                                 |
+|   `router`   |                                  Instance of Vue Router from '@/router/index.js'                                  |
 |   `store`    |        Instance of Pinia - **store only will be passed if your project uses Pinia (you have src/stores)**         |
 | `ssrContext` |   Available only on server-side, if building for SSR. [More info](/quasar-cli-vite/developing-ssr/ssr-context)    |
 |  `urlPath`   |              The pathname (path + search) part of the URL. It also contains the hash on client-side.              |
@@ -532,8 +532,8 @@ Lorem ipsum dolor sit amet, **consectetur adipiscing** elit, sed do _eiusmod_ te
 Lorem ipsum dolor sit amet, **consectetur adipiscing** elit, sed do _eiusmod_ tempor incididunt ut labore et dolore magna aliqua.
 
 <script import>
-import MarkdownExampleApi from 'src/.q-press/api/components/MarkdownExample.json'
-import MarkdownPageApi from 'src/.q-press/api/components/MarkdownPage.json'
+import MarkdownExampleApi from '@/.q-press/api/components/MarkdownExample.json'
+import MarkdownPageApi from '@/.q-press/api/components/MarkdownPage.json'
 </script>
 
 <MarkdownApi :api="MarkdownExampleApi" name="MarkdownExample"/>

package/src/templates/init/src/markdown/__elements2.md

@@ -229,7 +229,7 @@ sudo apt autoremove
    { name: 'diff' }
  ]
 
-@@ -20,6 +22,12 @@ loadLanguages(langList.map(l => l.name))
+@@ -20,6 +22,12 @@ const highlighter = await createHighlighter({
 
  const langMatch = langList.map(l => l.aliases || l.name).join('|')
 
@@ -268,7 +268,7 @@ sudo apt autoremove
 
 -function highlight (content, attrs) {
 -  const { lang, numbered } = attrs
--  const highlightedText = prism.highlight(content, prism.languages[ lang ], lang)
+-  const highlightedText = highlighter.codeToHtml(content, { lang })
 +const magicCommentRE = / *\/\/\[! (?<klass>[\w-]+)\] */
 +const magicCommentGlobalRE = new RegExp(magicCommentRE, 'g')
 
@@ -345,8 +345,8 @@ import AvatarApi from 'quasar/dist/api/QAvatar.json'
 <MarkdownApi :api="AvatarApi" name="QAvatar"/>
 
 <script import>
-import MarkdownExampleApi from 'src/.q-press/api/components/MarkdownExample.json'
-import MarkdownPageApi from 'src/.q-press/api/components/MarkdownPage.json'
+import MarkdownExampleApi from '@/.q-press/api/components/MarkdownExample.json'
+import MarkdownPageApi from '@/.q-press/api/components/MarkdownPage.json'
 </script>
 
 <MarkdownApi :api="MarkdownExampleApi" name="MarkdownExample"/>

package/src/templates/init/src/markdown/faq/best-practices.md

@@ -0,0 +1,27 @@
+---
+title: Best Practices FAQ
+desc: Recommended setup and maintenance practices for MD-Plugins.
+keys: FAQ
+---
+
+## Best Practices
+
+:::details Q. Should I install every MD-Plugins package?
+
+**A.** No. Install the packages you actually use. Q-Press pulls together the generated documentation-site pieces for Quasar projects, while direct Vite or MarkdownIt projects can stay smaller by installing only the plugin packages they need.
+:::
+
+:::details Q. Should I edit generated Q-Press files directly?
+
+**A.** Keep project-specific content in your app where possible, and treat generated `src/.q-press` files as replaceable. If you need the latest templates, update the package and run `quasar ext invoke @md-plugins/q-press`.
+:::
+
+:::details Q. How should I handle Q-Press themes?
+
+**A.** Import one Q-Press theme in `src/css/quasar.variables.scss` or `src/css/quasar.variables.sass`, then put project-specific overrides below that import. This keeps theme defaults predictable.
+:::
+
+:::details Q. Where is the full FAQ?
+
+**A.** The main FAQ lives at [Frequently Asked Questions](/other/faq).
+:::

package/src/templates/init/src/markdown/faq/general.md

@@ -0,0 +1,27 @@
+---
+title: General FAQ
+desc: General questions about MD-Plugins and where each package fits.
+keys: FAQ
+---
+
+## General Questions
+
+:::details Q. What are MD-Plugins?
+
+**A.** MD-Plugins are Markdown-it and Vite plugins that help turn Markdown into application-ready content. They cover headings, links, frontmatter, images, code blocks, examples, and Q-Press documentation sites.
+:::
+
+:::details Q. Can I use MD-Plugins without Quasar?
+
+**A.** Yes. The individual Markdown-it plugins and direct Vite plugins can be used in non-Quasar projects. The Quasar-only pieces are the app extensions, such as Q-Press.
+:::
+
+:::details Q. Which package should I start with?
+
+**A.** Use Q-Press for a full Quasar documentation site, `@md-plugins/vite-md-plugin` for direct Vue/Vite Markdown usage, and individual `@md-plugins/md-plugin-*` packages when you already own the MarkdownIt setup.
+:::
+
+:::details Q. Where is the full FAQ?
+
+**A.** The main FAQ lives at [Frequently Asked Questions](/other/faq).
+:::

package/src/templates/init/src/markdown/faq/troubleshooting.md

@@ -0,0 +1,27 @@
+---
+title: Troubleshooting FAQ
+desc: Common problems and fixes for MD-Plugins and Q-Press.
+keys: FAQ
+---
+
+## Troubleshooting
+
+:::details Q. My Markdown content is not rendering correctly. What should I check first?
+
+**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`.
+:::
+
+:::details Q. I upgraded Q-Press and now browser code says `process is not defined`. What changed?
+
+**A.** Quasar CLI Vite 3 expects browser-side code to use `import.meta.env` instead of `process.env`. Refresh generated Q-Press files with `quasar ext invoke @md-plugins/q-press` and choose `Overwrite All` if you want the current templates.
+:::
+
+:::details Q. How do I report a bug or request a feature?
+
+**A.** Open an issue in the MD-Plugins repository and include the package name, version, reproduction steps, expected result, and actual result.
+:::
+
+:::details Q. Where is the full FAQ?
+
+**A.** The main FAQ lives at [Frequently Asked Questions](/other/faq).
+:::

package/src/templates/init/src/markdown/getting-started/introduction.md

@@ -9,6 +9,8 @@ Welcome to the Markdown Plugins documentation! This guide will help you start us
 
 Markdown Plugins are a set of tools and extensions designed to enhance the functionality of Markdown. They provide additional features and capabilities that go beyond the standard Markdown syntax, allowing you to create more dynamic and interactive content.
 
+The core Markdown-it plugins and direct Vite plugins work in Vue/Vite projects as well as Quasar projects. Use the Quasar app extensions when you want Quasar CLI integration, generated Q-Press docs files, and Quasar-specific routing/build configuration.
+
 ## Key Features
 
 - **Extended Syntax**: Add custom syntax and elements to your Markdown documents.
@@ -21,7 +23,8 @@ Markdown Plugins are a set of tools and extensions designed to enhance the funct
 - **Title Extraction**: Extract the first header in Markdown as the page title.
 - **Script Imports**: Extract and process **<script import>** blocks from Markdown.
 - **Code Block Enhancements**: Enhance code block rendering with syntax highlighting, tabs, and more.
-- **Custom Styling**: Apply custom styles to your Markdown content for a more polished look.
+- **Mermaid Diagrams**: Render Mermaid fenced code blocks as client-side diagrams.
+- **Custom Styling**: Apply custom styles to your Markdown content for a more refined look.
 - **Integration**: Easily integrate with other tools and platforms to streamline your workflow.
 
 ## Why Use Markdown Plugins?
@@ -48,7 +51,7 @@ Here are some examples of what you can achieve with Markdown Plugins:
 
 - **Custom Syntax**: Add custom syntax for specific use cases.
 - **Enhanced Components**: Embed interactive and enhanced components.
-- **Custom Styling**: Apply custom styles to your content for a polished look.
+- **Custom Styling**: Apply custom styles to your content for a refined look.
 - **Frontmatter Support**: Extract and process frontmatter content from your Markdown files.
 - **Header Management**: Extract and process headers for generating ToCs or managing headers.
 - **Inline Code Styling**: Add custom classes to inline code blocks for styling.
@@ -57,11 +60,10 @@ Here are some examples of what you can achieve with Markdown Plugins:
 - **Title Extraction**: Extract the first header in Markdown as the page title.
 - **Script Imports**: Extract and process `<script import>` blocks from Markdown.
 - **Code Block Enhancements**: Enhance code block rendering with syntax highlighting, tabs, and more.
-
-<!-- Check out the [Examples](../guides/examples) section for more detailed examples and use cases. -->
+- **Mermaid Diagrams**: Add flowcharts, sequence diagrams, and other Mermaid diagrams to Markdown pages.
 
 ## Support
 
-If you have any questions or need assistance, please refer to the [FAQ](../guides/faq) or reach out to our support team.
+If you have any questions or need assistance, please refer to the [FAQ](/other/faq) or reach out to our support team.
 
 Happy coding!

package/src/templates/init/src/markdown/md-plugins/blockquote/overview.md

@@ -115,11 +115,13 @@ The official NPM name is `@md-plugins/md-plugin-blockquote`.
 
 ## Installation
 
-You can install the Blockquote plugin using `npm`, `yarn`, or `pnpm`. Choose your preferred method below:
+You can install the Blockquote plugin using `npm`, `yarn`, `pnpm`, or `bun`. Choose your preferred method below:
 
 ```tabs
 <<| bash pnpm |>>
 pnpm add @md-plugins/md-plugin-blockquote
+<<| bash bun |>>
+bun add @md-plugins/md-plugin-blockquote
 <<| bash yarn |>>
 yarn add @md-plugins/md-plugin-blockquote
 <<| bash npm |>>

package/src/templates/init/src/markdown/md-plugins/codeblocks/advanced.md

@@ -9,9 +9,7 @@ The `codeblocks` plugin enhances code block rendering in your Markdown content.
 
 ### Type Information
 
-```ts
-import { PluginWithOptions } from 'markdown-it'
-
+```ts [twoslash]
 interface Lang {
   name: string
   customCopy?: boolean
@@ -59,24 +57,30 @@ interface CodeblockPluginOptions {
    */
   pageScripts?: string[]
   /**
-   * Optional Prism languages configuration array. This allows you to override or add custom language definitions.
+   * Optional Shiki languages configuration array. This allows you to override or add custom language definitions.
    * Each item can have a `name`, optional `aliases`, and `customCopy` boolean.
    */
   langList?: Lang[]
 }
 
-declare module '@md-plugins/shared' {
-  interface MarkdownItEnv {
-    /**
-     * An array of page script (import statements) to be included.
-     */
-    pageScripts?: Set<string>
-  }
-}
+const options = {
+  defaultLang: 'typescript',
+  preClass: 'markdown-code',
+  langList: [{ name: 'typescript', aliases: 'typescript|ts' }],
+} satisfies CodeblockPluginOptions
+
+const firstLanguage = options.langList?.[0]
+//    ^?
 
-declare const codeblocksPlugin: PluginWithOptions<CodeblockPluginOptions>
+type CodeblockLanguage = NonNullable<CodeblockPluginOptions['langList']>[number]
+//   ^?
 
-export { type CodeblockPluginOptions, type Lang, codeblocksPlugin }
+interface MarkdownItEnv {
+  /**
+   * An array of page script (import statements) to be included.
+   */
+  pageScripts?: Set<string>
+}
 ```
 
 ### Default CSS
@@ -201,7 +205,7 @@ The `codeblocks` plugin provides several options for customization. Here are the
 #### `langList`
 
 - **Type**: `Array<{ name: string; aliases?: string; customCopy?: boolean }>`
-- **Description**: Optional Prism languages configuration array. This allows you to override or add custom language definitions. Each item can have a `name`, optional `aliases`, and `customCopy` boolean.
+- **Description**: Optional Shiki languages configuration array. This allows you to override or add custom language definitions. Each item can have a `name`, optional `aliases`, and `customCopy` boolean.
 
 ### Conclusion