@mistweaverco/mdsvex-shiki 1.0.16 → 1.1.0

package/README.md

@@ -1,21 +1,47 @@
 # mdsvex-shiki
 
-Supports most [common transformers][shiki-transformers] out of the box.
+A highlighter for mdsvex using Shiki with
+support for most [common transformers][shiki-transformers] out of the box.
+
+Why? Because mdsvex's built-in Prism highlighter is
+limited in features and customization options.
+
+We needed a better solution for our SvelteKit projects,
+so we created this package to fill the gap.
+
+<img width="945" height="874" alt="Screenshot" src="https://github.com/user-attachments/assets/c717f559-ae96-4372-a1ac-3eba3d4db340" />
 
 ## Installation
 
-Using bun:
+Using your package manager of choice, run:
 
 ```bash
-bun add @mistweaverco/mdsvex-shiki#v1.0.15
+# npm
+npm install @mistweaverco/mdsvex-shiki@v1.1.0
+
+# yarn
+yarn add @mistweaverco/mdsvex-shiki@v1.1.0
+
+# bun
+bun add @mistweaverco/mdsvex-shiki@v1.1.0
+
+# pnpm
+pnpm add @mistweaverco/mdsvex-shiki@v1.1.0
+
+# deno
+deno add npm:@mistweaverco/mdsvex-shiki@v1.1.0
 ```
 
 ## Configuration
 
 Available options are as follows:
 
-- `displayTitle`: Whether to show the title bar when a title is
-  provided in the code block info string. (default: `false`)
+- `displayPath`: Whether to show the file path in the title bar when
+  a path is provided. (default: `false`)
+  (e.g., `sh path=/path/to/file.sh`).
+  Paths are displayed with directory and file icons.
+  Long paths are collapsed
+  with a tooltip showing the full path.
 - `displayLang`: Whether to show the language label in
   the title bar. (default: `false`)
 - `disableCopyButton`: Whether to disable the copy button.
@@ -33,7 +59,7 @@ Available options are as follows:
 
 ```js
 const options = {
-  displayTitle: true,
+  displayPath: true,
   displayLang: true,
   shikiOptions: {
     theme: 'nord',
@@ -46,7 +72,7 @@ const options = {
 If you just want to basic Shiki styling without the bar,
 you don't need to import this CSS file.
 
-If you to display the title, language and/or copy button,
+If you want to display the path, language and/or copy button,
 you **must** import the CSS file.
 
 Probably in the root layout or HTML file that wraps your markdown content.
@@ -104,7 +130,7 @@ const config = {
       // ...
       highlight: {
         highlighter: await mdsvexShiki({
-          displayTitle: true,
+          displayPath: true,
           displayLang: true,
           shikiOptions: {
             // Shiki options

package/{index.cjs → dist/index.cjs}

@@ -4713,9 +4713,53 @@ function extractText(node) {
   }
   return "";
 }
+function parseMetaString(metaString) {
+  if (!metaString) {
+    return {
+      path: undefined
+    };
+  }
+  const pathMatch = metaString.match(/(?:^|\s)path=(?:"([^"]+)"|([^\s]+))/);
+  const pathValue = pathMatch?.[1] ?? pathMatch?.[2];
+  return {
+    path: pathValue
+  };
+}
+function formatPathSegments(path) {
+  const normalizedPath = path.replace(/\\/g, "/");
+  const segments = normalizedPath.split("/").filter((s) => s.length > 0);
+  if (segments.length === 0) {
+    return [];
+  }
+  if (segments.length === 1) {
+    return [{ type: "file", value: segments[0] ?? "" }];
+  }
+  const result = [];
+  const directories = segments.slice(0, -1);
+  const file = segments[segments.length - 1];
+  if (directories.length > 2) {
+    result.push({ type: "directory", value: directories[0] ?? "" });
+    result.push({ type: "directory", value: ".." });
+    result.push({
+      type: "directory",
+      value: directories[directories.length - 1] ?? ""
+    });
+  } else {
+    directories.forEach((dir) => {
+      result.push({ type: "directory", value: dir ?? "" });
+    });
+  }
+  result.push({ type: "file", value: file ?? "" });
+  return result;
+}
 
 // src/transformers.ts
-var mdsvexWrapItUpTransformer = (lang, codeText, disableCopyButton) => {
+var mdsvexWrapItUpTransformer = (lang, codeText, meta, options = {}) => {
+  const {
+    disableCopyButton = false,
+    displayPath = true,
+    displayLang = true
+  } = options;
   return {
     name: "transformerMdsvexWrapItUp",
     enforce: "post",
@@ -4733,11 +4777,86 @@ var mdsvexWrapItUpTransformer = (lang, codeText, disableCopyButton) => {
           }
         });
       }
-      const headerChildren = [
-        {
+      const headerChildren = [];
+      const { path } = parseMetaString(meta);
+      if (displayPath && path) {
+        const segments = formatPathSegments(path);
+        const allSegments = path.split(/[/\\]/).filter((s) => s.length > 0);
+        const hasCollapsedSegments = allSegments.length > 3;
+        const fullPath = allSegments.join("/");
+        const pathChildren = [];
+        segments.forEach((segment, index) => {
+          const isDirectory = segment.type === "directory";
+          const isCollapsed = segment.value === "..";
+          const dirIconPath = "M64 480H448c35.3 0 64-28.7 64-64V160c0-35.3-28.7-64-64-64H288c-10.1 0-19.6-4.7-25.6-12.8L243.2 57.6C231.1 41.5 212.1 32 192 32H64C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64z";
+          const fileIconPath = "M0 64C0 28.7 28.7 0 64 0H224V128c0 17.7 14.3 32 32 32H384V304H176c-8.8 0-16 7.2-16 16s7.2 16 16 16H384V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V64zM384 128H256V0L384 128z";
+          const properties = {
+            class: `path-segment ${isDirectory ? "directory" : "file"} ${isCollapsed ? "collapsed" : ""}`
+          };
+          if (isCollapsed && hasCollapsedSegments) {
+            properties.title = fullPath;
+          }
+          pathChildren.push({
+            type: "element",
+            tagName: "span",
+            properties,
+            children: [
+              {
+                type: "element",
+                tagName: "svg",
+                properties: {
+                  class: "icon",
+                  width: "14",
+                  height: "14",
+                  viewBox: "0 0 512 512",
+                  fill: "currentColor",
+                  "aria-hidden": "true"
+                },
+                children: [
+                  {
+                    type: "element",
+                    tagName: "path",
+                    properties: {
+                      d: isDirectory ? dirIconPath : fileIconPath
+                    },
+                    children: []
+                  }
+                ]
+              },
+              {
+                type: "text",
+                value: segment.value
+              }
+            ]
+          });
+          if (index < segments.length - 1) {
+            pathChildren.push({
+              type: "element",
+              tagName: "span",
+              properties: { class: "path-separator" },
+              children: [
+                {
+                  type: "text",
+                  value: "/"
+                }
+              ]
+            });
+          }
+        });
+        headerChildren.push({
+          type: "element",
+          tagName: "span",
+          properties: { class: "path" },
+          children: pathChildren
+        });
+      }
+      if (displayLang) {
+        headerChildren.push({
           type: "element",
           tagName: "span",
-          properties: { class: "language" },
+          properties: {
+            class: "language"
+          },
           children: [
             {
               type: "element",
@@ -4766,8 +4885,8 @@ var mdsvexWrapItUpTransformer = (lang, codeText, disableCopyButton) => {
               value: lang
             }
           ]
-        }
-      ];
+        });
+      }
       if (!disableCopyButton) {
         headerChildren.push({
           type: "element",
@@ -4837,20 +4956,20 @@ var mdsvexWrapItUpTransformer = (lang, codeText, disableCopyButton) => {
               tabindex: "0"
             },
             children: [
-              ...children.map((child) => {
+              ...children.flatMap((child) => {
                 if (child.type === "element" && child.tagName === "pre") {
-                  return {
-                    ...child,
-                    children: [
-                      {
-                        type: "element",
-                        tagName: "div",
-                        properties: { class: "header" },
-                        children: headerChildren
-                      },
-                      ...child.children
-                    ]
-                  };
+                  return [
+                    {
+                      type: "element",
+                      tagName: "div",
+                      properties: { class: "header" },
+                      children: headerChildren
+                    },
+                    {
+                      ...child,
+                      children: child.children
+                    }
+                  ];
                 }
                 return child;
               })
@@ -4878,7 +4997,7 @@ var mdsvexWrapItUpTransformer = (lang, codeText, disableCopyButton) => {
   };
 };
 
-// node_modules/shiki/node_modules/@shikijs/types/dist/index.mjs
+// node_modules/@shikijs/types/dist/index.mjs
 class ShikiError extends Error {
   constructor(message) {
     super(message);
@@ -9629,7 +9748,7 @@ function all(parent) {
   }
   return results.join("");
 }
-// node_modules/shiki/node_modules/@shikijs/core/dist/index.mjs
+// node_modules/@shikijs/core/dist/index.mjs
 function resolveColorReplacements(theme, options) {
   const replacements = typeof theme === "string" ? {} : { ...theme.colorReplacements };
   const themeName = typeof theme === "string" ? theme : theme.name;
@@ -13814,7 +13933,7 @@ var mdsvexShiki = async (config) => {
   delete shikiOptions.themes;
   delete shikiOptions.langs;
   await getHighlighterInstance(themes, langs);
-  return async (code, lang245) => {
+  return async (code, lang245, meta) => {
     lang245 = lang245 ?? "text";
     const highlighter = await getHighlighterInstance(themes, langs);
     const transformers = [
@@ -13822,7 +13941,7 @@ var mdsvexShiki = async (config) => {
       ...shikiOptions.transformers || []
     ];
     if (!transformers.find((t) => t.name === "transformerMdsvexWrapItUp")) {
-      transformers.push(mdsvexWrapItUpTransformer(lang245, code, config.disableCopyButton));
+      transformers.push(mdsvexWrapItUpTransformer(lang245, code, meta, config));
     }
     const html5 = highlighter.codeToHtml(code, {
       ...shikiOptions,

package/{index.d.ts → dist/index.d.ts}

@@ -16,7 +16,7 @@ import { Action } from 'svelte/action';
  */
 export declare const copyAction: Action<HTMLElement>;
 export type HighlighterOptions = {
-	displayTitle?: boolean;
+	displayPath?: boolean;
 	displayLanguage?: boolean;
 	disableCopyButton?: boolean;
 	shikiOptions?: Partial<CodeToHastOptions<BundledLanguage, BundledTheme>> & {
@@ -28,7 +28,7 @@ export type HighlighterOptions = {
 	};
 };
 export declare const defaultShikiOptions: Partial<CodeToHastOptions<BundledLanguage, BundledTheme>>;
-export declare const mdsvexShiki: (config: HighlighterOptions) => Promise<(code: string, lang: string) => Promise<string>>;
+export declare const mdsvexShiki: (config: HighlighterOptions) => Promise<(code: string, lang: string, meta?: string) => Promise<string>>;
 
 export {
 	mdsvexShiki as default,

package/{index.js → dist/index.js}

@@ -4686,9 +4686,53 @@ function extractText(node) {
   }
   return "";
 }
+function parseMetaString(metaString) {
+  if (!metaString) {
+    return {
+      path: undefined
+    };
+  }
+  const pathMatch = metaString.match(/(?:^|\s)path=(?:"([^"]+)"|([^\s]+))/);
+  const pathValue = pathMatch?.[1] ?? pathMatch?.[2];
+  return {
+    path: pathValue
+  };
+}
+function formatPathSegments(path) {
+  const normalizedPath = path.replace(/\\/g, "/");
+  const segments = normalizedPath.split("/").filter((s) => s.length > 0);
+  if (segments.length === 0) {
+    return [];
+  }
+  if (segments.length === 1) {
+    return [{ type: "file", value: segments[0] ?? "" }];
+  }
+  const result = [];
+  const directories = segments.slice(0, -1);
+  const file = segments[segments.length - 1];
+  if (directories.length > 2) {
+    result.push({ type: "directory", value: directories[0] ?? "" });
+    result.push({ type: "directory", value: ".." });
+    result.push({
+      type: "directory",
+      value: directories[directories.length - 1] ?? ""
+    });
+  } else {
+    directories.forEach((dir) => {
+      result.push({ type: "directory", value: dir ?? "" });
+    });
+  }
+  result.push({ type: "file", value: file ?? "" });
+  return result;
+}
 
 // src/transformers.ts
-var mdsvexWrapItUpTransformer = (lang, codeText, disableCopyButton) => {
+var mdsvexWrapItUpTransformer = (lang, codeText, meta, options = {}) => {
+  const {
+    disableCopyButton = false,
+    displayPath = true,
+    displayLang = true
+  } = options;
   return {
     name: "transformerMdsvexWrapItUp",
     enforce: "post",
@@ -4706,11 +4750,86 @@ var mdsvexWrapItUpTransformer = (lang, codeText, disableCopyButton) => {
           }
         });
       }
-      const headerChildren = [
-        {
+      const headerChildren = [];
+      const { path } = parseMetaString(meta);
+      if (displayPath && path) {
+        const segments = formatPathSegments(path);
+        const allSegments = path.split(/[/\\]/).filter((s) => s.length > 0);
+        const hasCollapsedSegments = allSegments.length > 3;
+        const fullPath = allSegments.join("/");
+        const pathChildren = [];
+        segments.forEach((segment, index) => {
+          const isDirectory = segment.type === "directory";
+          const isCollapsed = segment.value === "..";
+          const dirIconPath = "M64 480H448c35.3 0 64-28.7 64-64V160c0-35.3-28.7-64-64-64H288c-10.1 0-19.6-4.7-25.6-12.8L243.2 57.6C231.1 41.5 212.1 32 192 32H64C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64z";
+          const fileIconPath = "M0 64C0 28.7 28.7 0 64 0H224V128c0 17.7 14.3 32 32 32H384V304H176c-8.8 0-16 7.2-16 16s7.2 16 16 16H384V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V64zM384 128H256V0L384 128z";
+          const properties = {
+            class: `path-segment ${isDirectory ? "directory" : "file"} ${isCollapsed ? "collapsed" : ""}`
+          };
+          if (isCollapsed && hasCollapsedSegments) {
+            properties.title = fullPath;
+          }
+          pathChildren.push({
+            type: "element",
+            tagName: "span",
+            properties,
+            children: [
+              {
+                type: "element",
+                tagName: "svg",
+                properties: {
+                  class: "icon",
+                  width: "14",
+                  height: "14",
+                  viewBox: "0 0 512 512",
+                  fill: "currentColor",
+                  "aria-hidden": "true"
+                },
+                children: [
+                  {
+                    type: "element",
+                    tagName: "path",
+                    properties: {
+                      d: isDirectory ? dirIconPath : fileIconPath
+                    },
+                    children: []
+                  }
+                ]
+              },
+              {
+                type: "text",
+                value: segment.value
+              }
+            ]
+          });
+          if (index < segments.length - 1) {
+            pathChildren.push({
+              type: "element",
+              tagName: "span",
+              properties: { class: "path-separator" },
+              children: [
+                {
+                  type: "text",
+                  value: "/"
+                }
+              ]
+            });
+          }
+        });
+        headerChildren.push({
+          type: "element",
+          tagName: "span",
+          properties: { class: "path" },
+          children: pathChildren
+        });
+      }
+      if (displayLang) {
+        headerChildren.push({
           type: "element",
           tagName: "span",
-          properties: { class: "language" },
+          properties: {
+            class: "language"
+          },
           children: [
             {
               type: "element",
@@ -4739,8 +4858,8 @@ var mdsvexWrapItUpTransformer = (lang, codeText, disableCopyButton) => {
               value: lang
             }
           ]
-        }
-      ];
+        });
+      }
       if (!disableCopyButton) {
         headerChildren.push({
           type: "element",
@@ -4810,20 +4929,20 @@ var mdsvexWrapItUpTransformer = (lang, codeText, disableCopyButton) => {
               tabindex: "0"
             },
             children: [
-              ...children.map((child) => {
+              ...children.flatMap((child) => {
                 if (child.type === "element" && child.tagName === "pre") {
-                  return {
-                    ...child,
-                    children: [
-                      {
-                        type: "element",
-                        tagName: "div",
-                        properties: { class: "header" },
-                        children: headerChildren
-                      },
-                      ...child.children
-                    ]
-                  };
+                  return [
+                    {
+                      type: "element",
+                      tagName: "div",
+                      properties: { class: "header" },
+                      children: headerChildren
+                    },
+                    {
+                      ...child,
+                      children: child.children
+                    }
+                  ];
                 }
                 return child;
               })
@@ -4851,7 +4970,7 @@ var mdsvexWrapItUpTransformer = (lang, codeText, disableCopyButton) => {
   };
 };
 
-// node_modules/shiki/node_modules/@shikijs/types/dist/index.mjs
+// node_modules/@shikijs/types/dist/index.mjs
 class ShikiError extends Error {
   constructor(message) {
     super(message);
@@ -9602,7 +9721,7 @@ function all(parent) {
   }
   return results.join("");
 }
-// node_modules/shiki/node_modules/@shikijs/core/dist/index.mjs
+// node_modules/@shikijs/core/dist/index.mjs
 function resolveColorReplacements(theme, options) {
   const replacements = typeof theme === "string" ? {} : { ...theme.colorReplacements };
   const themeName = typeof theme === "string" ? theme : theme.name;
@@ -13787,7 +13906,7 @@ var mdsvexShiki = async (config) => {
   delete shikiOptions.themes;
   delete shikiOptions.langs;
   await getHighlighterInstance(themes, langs);
-  return async (code, lang245) => {
+  return async (code, lang245, meta) => {
     lang245 = lang245 ?? "text";
     const highlighter = await getHighlighterInstance(themes, langs);
     const transformers = [
@@ -13795,7 +13914,7 @@ var mdsvexShiki = async (config) => {
       ...shikiOptions.transformers || []
     ];
     if (!transformers.find((t) => t.name === "transformerMdsvexWrapItUp")) {
-      transformers.push(mdsvexWrapItUpTransformer(lang245, code, config.disableCopyButton));
+      transformers.push(mdsvexWrapItUpTransformer(lang245, code, meta, config));
     }
     const html5 = highlighter.codeToHtml(code, {
       ...shikiOptions,

package/package.json

@@ -1,30 +1,28 @@
 {
   "name": "@mistweaverco/mdsvex-shiki",
-  "version": "1.0.16",
+  "version": "1.1.0",
   "type": "module",
   "main": "./index.cjs",
   "module": "./index.js",
   "types": "./index.d.ts",
   "exports": {
     ".": {
-      "types": "./index.d.ts",
-      "import": "./index.js",
-      "require": "./index.cjs"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
     },
     "./styles.css": "./styles.css"
   },
   "files": [
-    "styles.css",
-    "*.js",
-    "*.cjs",
-    "*.d.ts"
+    "dist/*.{js,cjs,d.ts,css}",
+    "styles.css"
   ],
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "prepublishOnly": "bun run build",
     "clear": "rm -f *.js *.cjs *.d.ts",
     "build": "bun build.ts",
-    "publish:npm": "npm publish",
+    "publish:npm": "npm publish --access public",
     "publish:github": "npm publish --registry https://npm.pkg.github.com --access public"
   },
   "keywords": [

package/styles.css

@@ -25,7 +25,7 @@
 }
 
 .mdsvex-shiki {
-  padding: 5px 15px;
+  padding: 12px 20px;
   background-color: var(--shiki-dark-bg);
   position: relative;
   border: 1px solid var(--shiki-dark-border);
@@ -38,20 +38,16 @@
 }
 
 .mdsvex-shiki .header {
-  position: absolute;
-  top: 0;
-  right: 0;
-  z-index: 10;
   background-color: transparent;
-  padding: 0.5em 1em;
   pointer-events: none;
+  display: flex;
+  align-items: center;
+  gap: 0.5em;
 }
 
 .mdsvex-shiki .header > * {
   pointer-events: auto;
-  position: absolute;
-  top: 0;
-  right: 0;
+  position: relative;
   transition: opacity 0.2s ease;
 }
 
@@ -62,6 +58,7 @@
   display: flex;
   align-items: center;
   gap: 0.5em;
+  margin-left: auto;
 }
 
 .mdsvex-shiki .header .language .icon {
@@ -70,28 +67,17 @@
   flex-shrink: 0;
 }
 
-.mdsvex-shiki:hover .header .language,
-.mdsvex-shiki:focus-within .header .language {
-  opacity: 0;
-}
-
 .mdsvex-shiki .header .copy {
   color: var(--shiki-dark);
   background-color: transparent;
   border: none;
-  padding: 0.25em 0.5em;
   cursor: pointer;
-  opacity: 0;
+  opacity: 1;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
-.mdsvex-shiki:hover .header .copy,
-.mdsvex-shiki:focus-within .header .copy {
-  opacity: 1;
-}
-
 .mdsvex-shiki .header .copy .icon {
   width: 16px;
   height: 16px;
@@ -118,3 +104,42 @@
   color: var(--shiki-dark-accent-active);
 }
 
+.mdsvex-shiki .header .path {
+  color: var(--shiki-dark);
+  font-size: 0.875em;
+  opacity: 0.7;
+  display: flex;
+  align-items: center;
+  gap: 0.25em;
+  max-width: calc(100% - 100px);
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.mdsvex-shiki .header .path .icon {
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
+}
+
+.mdsvex-shiki .header .path .path-segment {
+  display: flex;
+  align-items: center;
+  gap: 0.25em;
+}
+
+.mdsvex-shiki .header .path .path-separator {
+  color: var(--shiki-dark);
+  opacity: 0.5;
+  margin: 0 0.125em;
+}
+
+.mdsvex-shiki .header .path .path-segment.collapsed {
+  cursor: help;
+}
+
+.mdsvex-shiki:hover .header .path,
+.mdsvex-shiki:focus-within .header .path {
+  opacity: 1;
+}
+