@md-plugins/quasar-app-extension-q-press 0.1.0-beta.17 → 0.1.0-beta.19

package/README.md

@@ -4,9 +4,9 @@ The Ultimate Markdown Solution for the Quasar Framework.
 
 See the [documentation](https://md-plugins.netlify.app/quasar-app-extensions/qpress/overview) for more information.
 
-> Current beta release: `0.1.0-beta.14`.
+> Current beta release: `0.1.0-beta.19`.
 >
-> Q-Press currently targets Quasar Vite projects using `@quasar/app-vite` `>=3.0.0-beta.31`. TypeScript processing is required.
+> Q-Press currently targets Quasar Vite projects using `@quasar/app-vite` `>=3.0.0-beta.33`. TypeScript processing is required.
 
 ## Features
 
@@ -40,12 +40,12 @@ See the [documentation](https://md-plugins.netlify.app/quasar-app-extensions/qpr
 - `pnpm i -D markdown-it @types/markdown-it`
 - `bun add -d markdown-it @types/markdown-it`
 
-3. Add `prismjs` to your project dependencies
+3. Q-Press adds `shiki` to your project dependencies when invoked. If you are wiring the generated files manually, add it yourself:
 
-- `npm i prismjs`
-- `yarn add prismjs`
-- `pnpm add prismjs`
-- `bun add prismjs`
+- `npm i shiki`
+- `yarn add shiki`
+- `pnpm add shiki`
+- `bun add shiki`
 
 ## Modifications
 

package/dist/index.js

@@ -42,7 +42,7 @@ function extendTypeScriptConfig(typescriptConfig) {
 }
 export default defineIndexScript((api) => {
     api.compatibleWith('quasar', '^2.0.0');
-    api.compatibleWith('@quasar/app-vite', '>=3.0.0-beta.32');
+    api.compatibleWith('@quasar/app-vite', '>=3.0.0-beta.33');
     // here we extend /quasar.config, so we can add some Vite/Vue stuff
     api.extendQuasarConf(async (config) => {
         config.build ??= {};

package/dist/install.js

@@ -7,7 +7,7 @@ import { defineInstallScript } from '@quasar/app-vite';
 import { existsSync } from 'node:fs';
 export default defineInstallScript(async (api) => {
     api.compatibleWith('quasar', '^2.0.0');
-    api.compatibleWith('@quasar/app-vite', '>=3.0.0-beta.32');
+    api.compatibleWith('@quasar/app-vite', '>=3.0.0-beta.33');
     // project must have pinia installed
     if ((await api.getStorePackageName()) !== 'pinia') {
         console.error('-----------------------------');
@@ -22,6 +22,11 @@ export default defineInstallScript(async (api) => {
         console.error('----------------------------------');
         throw new Error('This extension requires TypeScript');
     }
+    api.extendPackageJson({
+        dependencies: {
+            shiki: '^4.1.0',
+        },
+    });
     const path = api.resolve.src('siteConfig');
     if (existsSync(path)) {
         // this is an update scenario

package/dist/templates/init/src/_q-press/api/components/MarkdownCode.json

@@ -6,7 +6,7 @@
   "props": {
     "code": {
       "type": "String",
-      "desc": "The code to display",
+      "desc": "The code to display with Shiki syntax highlighting",
       "examples": [
         "'const a = 1;'",
         "'<div>Hello World</div>'"
@@ -34,4 +34,4 @@
       "category": "content"
     }
   }
-}
+}

package/dist/templates/init/src/_q-press/components/MarkdownCode.vue

@@ -1,14 +1,20 @@
 <template>
   <div class="relative-position markdown-copybtn-hover">
-    <MarkdownCodePrism :lang="props.lang" :code="props.code" :style="style" />
+    <pre class="markdown-code" :class="block.className" :style="[style, block.style]"><code v-html="block.code"></code></pre>
     <MarkdownCopyButton />
   </div>
 </template>
 
 <script setup lang="ts">
+import { createHighlighterCoreSync } from 'shiki/core'
+import { createJavaScriptRegexEngine } from 'shiki/engine/javascript'
+import htmlLang from 'shiki/langs/html.mjs'
+import javascriptLang from 'shiki/langs/javascript.mjs'
+import vueLang from 'shiki/langs/vue.mjs'
+import githubDark from 'shiki/themes/github-dark.mjs'
+import githubLight from 'shiki/themes/github-light.mjs'
 import { computed } from 'vue'
 
-import MarkdownCodePrism from './MarkdownCodePrism'
 import MarkdownCopyButton from './MarkdownCopyButton.vue'
 
 const props = defineProps({
@@ -28,4 +34,66 @@ const props = defineProps({
 })
 
 const style = computed(() => (props.maxHeight !== void 0 ? { maxHeight: props.maxHeight } : null))
+
+const block = computed(() => {
+  return parseHighlightedBlock(highlightCode(props.code, props.lang))
+})
+
+const highlighter = createHighlighterCoreSync({
+  engine: createJavaScriptRegexEngine(),
+  themes: [githubLight, githubDark],
+  langs: [htmlLang, javascriptLang, vueLang].flat(),
+  langAlias: {
+    bash: 'javascript',
+    css: 'html',
+    js: 'javascript',
+    markup: 'vue',
+    sass: 'html',
+    scss: 'html',
+    sh: 'javascript',
+    shell: 'javascript',
+    ts: 'javascript',
+  },
+})
+
+function highlightCode(code: string, lang: string): string {
+  const options = {
+    lang: normalizeLang(lang),
+    themes: {
+      light: 'github-light',
+      dark: 'github-dark',
+    },
+    defaultColor: false,
+  } as const
+
+  try {
+    return highlighter.codeToHtml(code, options)
+  } catch {
+    return highlighter.codeToHtml(code, {
+      ...options,
+      lang: 'text',
+    })
+  }
+}
+
+function normalizeLang(lang: string): string {
+  return (
+    {
+      js: 'javascript',
+      markup: 'html',
+      ts: 'typescript',
+    }[lang] ?? lang
+  )
+}
+
+function parseHighlightedBlock(html: string): { className: string; code: string; style: string } {
+  const match = html.match(/^<pre(?<attrs>[^>]*)><code>(?<code>[\s\S]*)<\/code><\/pre>$/)
+  const attrs = match?.groups?.attrs ?? ''
+
+  return {
+    className: attrs.match(/class="(?<value>[^"]*)"/)?.groups?.value ?? 'shiki',
+    code: match?.groups?.code ?? '',
+    style: attrs.match(/style="(?<value>[^"]*)"/)?.groups?.value ?? '',
+  }
+}
 </script>

package/dist/templates/init/src/_q-press/components/MarkdownLink.vue

@@ -20,14 +20,14 @@ const internal = computed(
 
 <style lang="scss">
 .markdown-link {
-  color: scale-color($brand-primary, $lightness: -35%);
+  color: $brand-light-text;
   text-decoration: none;
-  border-bottom: 1px dotted currentColor;
+  border-bottom: 1px dotted rgba($brand-primary, 0.78);
   outline: 0;
   transition: color $header-quick-transition;
 
   body.body--dark & {
-    color: $brand-primary;
+    color: $brand-dark-text;
   }
 
   &:hover {

package/dist/templates/init/src/_q-press/css/app.scss

@@ -1,8 +1,9 @@
 @use 'sass:math';
+@use 'sass:color';
 @use './fonts.scss';
 
-// Keep this import so Prism shares the selected qPress theme variables.
-@import './prism-theme.scss';
+// Keep this import so Shiki code blocks share the selected qPress theme variables.
+@import './code-theme.scss';
 
 .material-icons {
   font-family: 'Material Icons';
@@ -83,9 +84,10 @@ ul {
   line-height: $font-size;
   border-radius: $generic-border-radius;
   font-family: inherit;
-  color: scale-color($brand-primary, $lightness: -35%);
+  color: $brand-light-text;
+  background-color: rgba($brand-primary, 0.08);
   vertical-align: baseline;
-  border: 1px solid currentColor;
+  border: 1px solid rgba($brand-primary, 0.5);
 }
 
 .markdown-note {
@@ -108,10 +110,13 @@ ul {
     // .markdown-note__title,
     .markdown-link,
     .markdown-token {
-      color: scale-color($brand-primary, $lightness: -35%);
+      color: $brand-light-text;
+    }
+    .markdown-link {
+      border-bottom-color: rgba($brand-primary, 0.78);
     }
     .markdown-token {
-      border-color: scale-color($brand-primary, $lightness: -35%);
+      border-color: rgba($brand-primary, 0.5);
     }
     & strong {
       font-weight: 700;
@@ -120,16 +125,16 @@ ul {
   }
 
   &--tip {
-    color: scale-color($positive, $lightness: -40%) !important;
-    background-color: scale-color($positive, $lightness: 85%);
+    color: color.scale($positive, $lightness: -40%) !important;
+    background-color: color.scale($positive, $lightness: 85%);
     border-color: $positive;
     .markdown-note__title,
     .markdown-link,
     .markdown-token {
-      color: scale-color($positive, $lightness: -40%);
+      color: color.scale($positive, $lightness: -40%);
     }
     .markdown-token {
-      border-color: scale-color($positive, $lightness: -40%);
+      border-color: color.scale($positive, $lightness: -40%);
     }
     & strong {
       font-weight: 700;
@@ -138,16 +143,16 @@ ul {
   }
 
   &--warning {
-    color: scale-color($warning, $lightness: -40%);
-    background-color: scale-color($warning, $lightness: 85%);
-    border-color: scale-color($warning, $lightness: -30%);
+    color: color.scale($warning, $lightness: -40%);
+    background-color: color.scale($warning, $lightness: 85%);
+    border-color: color.scale($warning, $lightness: -30%);
     .markdown-note__title,
     .markdown-link,
     .markdown-token {
-      color: scale-color($warning, $lightness: -40%);
+      color: color.scale($warning, $lightness: -40%);
     }
     .markdown-token {
-      border-color: scale-color($warning, $lightness: -40%);
+      border-color: color.scale($warning, $lightness: -40%);
     }
     & strong {
       font-weight: 700;
@@ -156,8 +161,8 @@ ul {
   }
 
   &--danger {
-    color: scale-color($negative, $lightness: -40%);
-    background-color: scale-color($negative, $lightness: 90%);
+    color: color.scale($negative, $lightness: -40%);
+    background-color: color.scale($negative, $lightness: 90%);
     border-color: $negative;
     .markdown-note__title,
     .markdown-link,
@@ -512,7 +517,7 @@ body.q-scroll--lock .q-page > .q-scroll--anchor {
 .markdown-heading .q-badge,
 .header-badge {
   color: $brand-primary;
-  background: scale-color($light-bg, $lightness: 15%);
+  background: color.scale($light-bg, $lightness: 15%);
   vertical-align: super;
   letter-spacing: $letter-spacing-brand;
   padding: 4px 8px;
@@ -553,6 +558,12 @@ $letter-spacing-list: 40, 100, 225, 263, 300, 375, 450;
 }
 
 body.body--dark {
+  .markdown-token {
+    color: $brand-dark-text;
+    background-color: rgba($brand-primary, 0.18);
+    border-color: rgba($brand-primary, 0.72);
+  }
+
   .markdown-technical {
     color: $brand-dark-text;
     background: $brand-dark-bg;
@@ -592,9 +603,9 @@ body.body--dark {
 
   .markdown-note {
     &:not(.markdown-note--tip, .markdown-note--warning, .markdown-note--danger) {
-      color: scale-color($dark-pill, $lightness: 80%);
+      color: color.scale($dark-pill, $lightness: 80%);
       background-color: $dark-pill;
-      border-color: scale-color($dark-pill, $lightness: 50%);
+      border-color: color.scale($dark-pill, $lightness: 50%);
       .markdown-token {
         border-color: #ddd;
         color: #ddd;
@@ -606,7 +617,7 @@ body.body--dark {
 
     &--tip {
       border-color: $positive;
-      background-color: scale-color($positive, $lightness: -85%);
+      background-color: color.scale($positive, $lightness: -85%);
       .markdown-note__title,
       .markdown-link,
       .markdown-token {
@@ -619,7 +630,7 @@ body.body--dark {
 
     &--warning {
       border-color: $warning;
-      background-color: scale-color($warning, $lightness: -85%);
+      background-color: color.scale($warning, $lightness: -85%);
       .markdown-note__title,
       .markdown-link,
       .markdown-token {
@@ -632,7 +643,7 @@ body.body--dark {
 
     &--danger {
       border-color: $negative;
-      background-color: scale-color($negative, $lightness: -80%);
+      background-color: color.scale($negative, $lightness: -80%);
     }
   }
 
@@ -657,7 +668,7 @@ body.body--dark {
   padding: 4px 8px 4px 28px;
   position: relative;
   border-radius: 3px 5px 5px 0;
-  background: scale-color($brand-light, $lightness: -15%);
+  background: color.scale($brand-light, $lightness: -15%);
   color: $brand-secondary;
   font-size: ($font-size + 2px);
   letter-spacing: $letter-spacing-brand;
@@ -671,7 +682,7 @@ body.body--dark {
     height: 0;
     border: 0 solid transparent;
     border-width: 9px 0 0 11px;
-    border-top-color: scale-color($brand-light, $lightness: -25%);
+    border-top-color: color.scale($brand-light, $lightness: -25%);
   }
 }
 
@@ -679,6 +690,6 @@ body.body--dark .markdown-card-title {
   background: $brand-secondary;
   color: $dark-text;
   &:after {
-    border-top-color: scale-color($brand-secondary, $lightness: -30%);
+    border-top-color: color.scale($brand-secondary, $lightness: -30%);
   }
 }