@astrojs/markdoc 0.5.2 → 0.7.0

package/README.md

@@ -458,6 +458,40 @@ To achieve a more Markdown-like experience, where HTML elements can be included
 > **Warning**
 > When `allowHTML` is enabled, HTML markup inside Markdoc documents will be rendered as actual HTML elements (including `<script>`), making attack vectors like XSS possible. Ensure that any HTML markup comes from trusted sources.
 
+### `ignoreIndentation`
+
+By default, any content that is indented by four spaces is treated as a code block. Unfortunately, this behavior makes it difficult to use arbitrary levels of indentation to improve the readability of documents with complex structure.
+
+When using nested tags in Markdoc, it can be helpful to indent the content inside of tags so that the level of depth is clear. To support arbitrary indentation, we have to disable the indent-based code blocks and modify several other markdown-it parsing rules that account for indent-based code blocks. These changes can be applied by enabling the ignoreIndentation option.
+
+```diff lang="js" "ignoreIndentation: true"
+  // astro.config.mjs
+  import { defineConfig } from 'astro/config';
+  import markdoc from '@astrojs/markdoc';
+
+  export default defineConfig({
+    // ...
++   integrations: [markdoc({ ignoreIndentation: true })],
+    //                       ^^^^^^^^^^^^^^^^^^^^^^^
+  });
+```
+
+```md
+# Welcome to Markdoc with indented tags 👋
+
+# Note: Can use either spaces or tabs for indentation
+
+{% custom-tag %}
+{% custom-tag %} ### Tags can be indented for better readability
+
+    {% another-custom-tag %}
+      This is easier to follow when there is a lot of nesting
+    {% /another-custom-tag %}
+
+{% /custom-tag %}
+{% /custom-tag %}
+```
+
 ## Examples
 
 - The [Astro Markdoc starter template](https://github.com/withastro/astro/tree/latest/examples/with-markdoc) shows how to use Markdoc files in your Astro project.

package/dist/extensions/shiki.js

@@ -1,6 +1,6 @@
 import Markdoc from "@markdoc/markdoc";
 import { unescapeHTML } from "astro/runtime/server/index.js";
-import { getHighlighter } from "shiki";
+import { bundledLanguages, getHighlighter } from "shikiji";
 const ASTRO_COLOR_REPLACEMENTS = {
   "#000001": "var(--astro-code-color-text)",
   "#000002": "var(--astro-code-color-background)",
@@ -14,28 +14,28 @@ const ASTRO_COLOR_REPLACEMENTS = {
   "#000011": "var(--astro-code-token-punctuation)",
   "#000012": "var(--astro-code-token-link)"
 };
+const COLOR_REPLACEMENT_REGEX = new RegExp(
+  `(${Object.keys(ASTRO_COLOR_REPLACEMENTS).join("|")})`,
+  "g"
+);
 const PRE_SELECTOR = /<pre class="(.*?)shiki(.*?)"/;
 const LINE_SELECTOR = /<span class="line"><span style="(.*?)">([\+|\-])/g;
 const INLINE_STYLE_SELECTOR = /style="(.*?)"/;
+const INLINE_STYLE_SELECTOR_GLOBAL = /style="(.*?)"/g;
 const highlighterCache = /* @__PURE__ */ new Map();
 async function shiki({
   langs = [],
   theme = "github-dark",
   wrap = false
 } = {}) {
-  const cacheID = typeof theme === "string" ? theme : theme.name;
-  if (!highlighterCache.has(cacheID)) {
-    highlighterCache.set(
-      cacheID,
-      await getHighlighter({ theme }).then((hl) => {
-        hl.setColorReplacements(ASTRO_COLOR_REPLACEMENTS);
-        return hl;
-      })
-    );
-  }
-  const highlighter = highlighterCache.get(cacheID);
-  for (const lang of langs) {
-    await highlighter.loadLanguage(lang);
+  const cacheId = typeof theme === "string" ? theme : theme.name || "";
+  let highlighter = highlighterCache.get(cacheId);
+  if (!highlighter) {
+    highlighter = await getHighlighter({
+      langs: langs.length ? langs : Object.keys(bundledLanguages),
+      themes: [theme]
+    });
+    highlighterCache.set(cacheId, highlighter);
   }
   return {
     nodes: {
@@ -56,7 +56,7 @@ async function shiki({
           } else {
             lang = "plaintext";
           }
-          let html = highlighter.codeToHtml(attributes.content, { lang });
+          let html = highlighter.codeToHtml(attributes.content, { lang, theme });
           html = html.replace(PRE_SELECTOR, `<pre class="$1astro-code$2"`);
           if (attributes.language === "diff") {
             html = html.replace(
@@ -72,12 +72,19 @@ async function shiki({
               'style="$1; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;"'
             );
           }
+          const themeName = typeof theme === "string" ? theme : theme.name;
+          if (themeName === "css-variables") {
+            html = html.replace(INLINE_STYLE_SELECTOR_GLOBAL, (m) => replaceCssVariables(m));
+          }
           return unescapeHTML(html);
         }
       }
     }
   };
 }
+function replaceCssVariables(str) {
+  return str.replace(COLOR_REPLACEMENT_REGEX, (match) => ASTRO_COLOR_REPLACEMENTS[match] || match);
+}
 export {
   shiki as default
 };

package/dist/options.d.ts

@@ -1,3 +1,4 @@
 export interface MarkdocIntegrationOptions {
     allowHTML?: boolean;
+    ignoreIndentation?: boolean;
 }

package/dist/tokenizer.js

@@ -11,6 +11,9 @@ function getMarkdocTokenizer(options) {
       tokenizerOptions.allowIndentation = true;
       tokenizerOptions.html = true;
     }
+    if (options?.ignoreIndentation) {
+      tokenizerOptions.allowIndentation = true;
+    }
     _cachedMarkdocTokenizers[key] = new Markdoc.Tokenizer(tokenizerOptions);
   }
   return _cachedMarkdocTokenizers[key];

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@astrojs/markdoc",
   "description": "Add support for Markdoc in your Astro site",
-  "version": "0.5.2",
+  "version": "0.7.0",
   "type": "module",
   "types": "./dist/index.d.ts",
   "author": "withastro",
@@ -62,13 +62,13 @@
     "gray-matter": "^4.0.3",
     "htmlparser2": "^9.0.0",
     "kleur": "^4.1.5",
-    "shiki": "^0.14.3",
+    "shikiji": "^0.6.8",
     "zod": "3.21.1",
     "@astrojs/internal-helpers": "0.2.1",
     "@astrojs/prism": "3.0.0"
   },
   "peerDependencies": {
-    "astro": "^3.2.3"
+    "astro": "^3.3.4"
   },
   "devDependencies": {
     "@types/chai": "^4.3.5",
@@ -81,8 +81,8 @@
     "mocha": "^10.2.0",
     "rollup": "^3.28.1",
     "vite": "^4.4.9",
-    "@astrojs/markdown-remark": "3.2.1",
-    "astro": "3.2.3",
+    "@astrojs/markdown-remark": "3.3.0",
+    "astro": "3.3.4",
     "astro-scripts": "0.0.14"
   },
   "engines": {