@md-plugins/md-plugin-codeblocks 0.1.0-beta.18 → 0.1.0-beta.19

package/README.md

@@ -5,6 +5,7 @@ A **Markdown-It** plugin that enhances code block rendering by providing syntax
 ## Features
 
 - **Syntax Highlighting**: Automatically highlights code blocks using **Shiki**.
+- **TwoSlash Hovers**: Opt in to TypeScript-powered hover and query output for richer examples.
 - **Line Numbering**: Optionally adds line numbers to code blocks.
 - **Magic Comments**: Supports special comments like `[[! highlight]]`, `[[! add]]`, and `[[! rem]]` for inline code annotations.
 - **Tabbed Code Blocks**: Enables the creation of tabbed code blocks for multi-language or multi-file examples.
@@ -101,6 +102,17 @@ console.log('Line 3')
 ```
 ````
 
+### TwoSlash Type Hovers
+
+Add the `twoslash` attribute to TypeScript or JavaScript examples when you want inferred type information, compiler diagnostics, or `^?` query output.
+
+````markup
+```ts [twoslash]
+const count = 1
+//    ^?
+```
+````
+
 ### Line Highlighting and Annotations
 
 ````markup

package/dist/index.mjs

@@ -37,6 +37,14 @@ const highlighter = await createHighlighter({
   langs: shikiLangs,
   langAlias: shikiLangAlias
 });
+const debugEnvValue = process.env.DEBUG;
+delete process.env.DEBUG;
+const twoslashModule = await import('@shikijs/twoslash').finally(() => {
+  if (debugEnvValue !== void 0) {
+    process.env.DEBUG = debugEnvValue;
+  }
+});
+const { rendererRich, transformerTwoslash } = twoslashModule;
 const supportedLangSet = new Set(highlighter.getLoadedLanguages());
 const themeOptions = {
   themes: {
@@ -52,11 +60,13 @@ function buildCodeBlockTransformers({
   codeClass,
   lineList,
   maxheight,
-  preClass
+  preClass,
+  twoslash
 }) {
   return [
     preClassTransformer(preClass, maxheight),
     codeClassTransformer(codeClass),
+    ...twoslash === true ? [twoslashTransformer] : [],
     transformerNotationHighlight(),
     transformerNotationDiff(),
     transformerNotationFocus(),
@@ -65,6 +75,14 @@ function buildCodeBlockTransformers({
     lineDecorTransformer(lineList)
   ];
 }
+const twoslashTransformer = transformerTwoslash({
+  renderer: rendererRich(),
+  twoslashOptions: {
+    compilerOptions: {
+      traceResolution: false
+    }
+  }
+});
 function preClassTransformer(preClass, maxheight) {
   return {
     name: "md-plugins:pre-class",
@@ -216,11 +234,13 @@ const codeblocksPlugin = (md, options) => {
       const tabsMatch = line.match(tabsLineRE);
       if (tabsMatch !== null) {
         const { lang, attrs, title } = tabsMatch.groups || {};
-        currentTabName = title?.trim() || `Tab ${list.length + 1}`;
+        const bareAttrs = extractBareAttrs(title?.trim() || null);
+        currentTabName = bareAttrs.title ?? `Tab ${list.length + 1}`;
         list.push(currentTabName);
         tabMap[currentTabName] = {
           attrs: {
             ...parseAttrs(attrs?.trim() || null),
+            ...bareAttrs.attrs,
             lang
           },
           content: []
@@ -239,6 +259,7 @@ const codeblocksPlugin = (md, options) => {
     };
   }
   const magicCommentList = ["highlight", "rem", "add"];
+  const bareAttrList = ["twoslash"];
   const magicCommentRE = new RegExp(` *\\[\\[! (?<type>(${magicCommentList.join("|")}))\\]\\] *`);
   const magicCommentGlobalRE = new RegExp(magicCommentRE, "g");
   function extractCodeLineProps(lines, attrs) {
@@ -298,7 +319,7 @@ const codeblocksPlugin = (md, options) => {
     return acc;
   }
   function getHighlightedContent(rawContent, attrs) {
-    const { lang, maxheight } = attrs;
+    const { lang, maxheight, twoslash } = attrs;
     let content = rawContent.trim();
     const lineList = parseCodeLine(content, attrs);
     if (lang !== "markup") {
@@ -312,7 +333,8 @@ const codeblocksPlugin = (md, options) => {
         codeClass,
         lineList,
         maxheight,
-        preClass: preClass ?? "markdown-code"
+        preClass: preClass ?? "markdown-code",
+        twoslash: twoslash === true || twoslash === "true"
       })
     }).replace("<pre ", "<pre v-pre ") + `<${copyButtonComponent}${langProp} />`;
   }
@@ -326,6 +348,27 @@ const codeblocksPlugin = (md, options) => {
     }
     return acc;
   }
+  function extractBareAttrs(title) {
+    if (title === null) {
+      return {
+        attrs: {},
+        title: null
+      };
+    }
+    const attrs = {};
+    const remainingTitle = [];
+    for (const chunk of title.split(/\s+/)) {
+      if (remainingTitle.length === 0 && bareAttrList.includes(chunk)) {
+        attrs[chunk] = true;
+        continue;
+      }
+      remainingTitle.push(chunk);
+    }
+    return {
+      attrs,
+      title: remainingTitle.length > 0 ? remainingTitle.join(" ") : null
+    };
+  }
   function parseDefinitionLine(token) {
     const match = token.info.trim().match(definitionLineRE);
     if (match === null) {
@@ -335,10 +378,12 @@ const codeblocksPlugin = (md, options) => {
       };
     }
     const { lang, attrs, title } = match.groups || {};
+    const bareAttrs = extractBareAttrs(title?.trim() || null);
     const acc = {
       ...parseAttrs(attrs?.trim() || null),
+      ...bareAttrs.attrs,
       lang,
-      title: title?.trim() || null
+      title: bareAttrs.title
     };
     if (acc.lang === "tabs") {
       acc.tabs = extractTabs(token.content);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@md-plugins/md-plugin-codeblocks",
-  "version": "0.1.0-beta.18",
+  "version": "0.1.0-beta.19",
   "description": "A markdown-it plugin for code blocks.",
   "keywords": [
     "markdown-it",
@@ -37,12 +37,13 @@
   },
   "dependencies": {
     "@shikijs/transformers": "^4.1.0",
+    "@shikijs/twoslash": "^4.1.0",
     "shiki": "^4.1.0"
   },
   "devDependencies": {
     "@types/markdown-it": "^14.1.2",
     "markdown-it": "^14.2.0",
-    "@md-plugins/shared": "0.1.0-beta.18"
+    "@md-plugins/shared": "0.1.0-beta.19"
   },
   "peerDependencies": {
     "markdown-it": "^14.2.0"