code-hike · pomber · Jun 8, 2023 · Jun 5, 2023 · Jun 6, 2023 · Jun 6, 2023
diff --git a/.gitignore b/.gitignore
@@ -15,3 +15,5 @@ packages/mdx/components.d.ts
 
 # Contentlayer
 .contentlayer
+
+todo.md
diff --git a/examples/browser/index.html b/examples/browser/index.html
@@ -4,7 +4,7 @@
     <title>Code Hike in the browser</title>
     <link
       rel="stylesheet"
-      href="https://esm.sh/@code-hike/mdx@0.8.0--canary.308.cf940c7.0/dist/index.css"
+      href="https://esm.sh/@code-hike/mdx@0.9.0/dist/index.css"
     />
   </head>
   <body>
@@ -16,9 +16,8 @@
       import { evaluate } from "https://esm.sh/@mdx-js/mdx?bundle"
       import * as runtime from "https://esm.sh/react/jsx-runtime.js"
 
-      import theme from "https://esm.sh/shiki@0.10.1/themes/dracula.json" assert { type: "json" }
-      import { remarkCodeHike } from "https://esm.sh/@code-hike/mdx@0.8.0--canary.308.cf940c7.0/dist/index.browser.mjs"
-      import { CH } from "https://esm.sh/@code-hike/mdx@0.8.0--canary.308.d5a4a6c.0/components"
+      import { remarkCodeHike } from "https://esm.sh/@code-hike/mdx@0.9.0/dist/index.browser.mjs"
+      import { CH } from "https://esm.sh/@code-hike/mdx@0.9.0/components"
 
       const mdx = `# Test
 
@@ -37,7 +36,9 @@
 
       const { default: Content } = await evaluate(mdx, {
         ...runtime,
-        remarkPlugins: [[remarkCodeHike, { autoImport: false, theme }]],
+        remarkPlugins: [
+          [remarkCodeHike, { autoImport: false, theme: "dracula" }],
+        ],
       })
 
       const App = () => {

diff --git a/examples/bundle-test/next.config.js b/examples/bundle-test/next.config.js
@@ -1,10 +1,9 @@
 const { remarkCodeHike } = require("@code-hike/mdx")
-const theme = require("shiki/themes/nord.json")
 
 const withMDX = require("@next/mdx")({
   extension: /\.mdx?$/,
   options: {
-    remarkPlugins: [[remarkCodeHike, { theme }]],
+    remarkPlugins: [[remarkCodeHike, { theme: "nord" }]],
   },
 })
 

diff --git a/examples/contentlayer/contentlayer.config.js b/examples/contentlayer/contentlayer.config.js
@@ -1,8 +1,5 @@
 import { defineDocumentType, makeSource } from "contentlayer/source-files"
 import { remarkCodeHike } from "@code-hike/mdx"
-import { createRequire } from "module"
-const require = createRequire(import.meta.url)
-const theme = require("shiki/themes/material-palenight.json")
 
 const Post = defineDocumentType(() => ({
   name: "Post",
@@ -27,5 +24,5 @@ export default makeSource({
   contentDirPath: "posts",
   documentTypes: [Post],
 
-  mdx: { remarkPlugins: [[remarkCodeHike, { theme }]] },
+  mdx: { remarkPlugins: [[remarkCodeHike, { theme: "material-palenight" }]] },
 })
diff --git a/examples/docusaurus/docusaurus.config.js b/examples/docusaurus/docusaurus.config.js
@@ -1,7 +1,6 @@
 // @ts-check
 // Note: type annotations allow type checking and IDEs autocompletion
 
-const theme = require("shiki/themes/material-palenight.json")
 const { remarkCodeHike } = require("@code-hike/mdx")
 
 /** @type {import('@docusaurus/types').Config} */
@@ -18,7 +17,9 @@ const config = {
       /** @type {import('@docusaurus/preset-classic').Options} */
       ({
         docs: {
-          beforeDefaultRemarkPlugins: [[remarkCodeHike, { theme }]],
+          beforeDefaultRemarkPlugins: [
+            [remarkCodeHike, { theme: "material-palenight" }],
+          ],
           sidebarPath: require.resolve("./sidebars.js"),
         },
         theme: {

diff --git a/examples/gatsby/gatsby-config.js b/examples/gatsby/gatsby-config.js
@@ -1,5 +1,4 @@
 const { remarkCodeHike } = require("@code-hike/mdx")
-const theme = require("shiki/themes/material-palenight.json")
 
 module.exports = {
   siteMetadata: {
@@ -11,7 +10,7 @@ module.exports = {
       options: {
         extensions: [`.mdx`, `.md`],
         mdxOptions: {
-          remarkPlugins: [[remarkCodeHike, { theme }]],
+          remarkPlugins: [[remarkCodeHike, { theme: "material-palenight" }]],
         },
       },
     },

diff --git a/examples/mdx-bundler/src/posts.js b/examples/mdx-bundler/src/posts.js
@@ -1,7 +1,6 @@
 import fs from "fs"
 import path from "path"
 import { remarkCodeHike } from "@code-hike/mdx"
-import theme from "shiki/themes/material-palenight.json"
 import { bundleMDX } from "mdx-bundler"
 
 export function getPostNames() {
@@ -42,7 +41,7 @@ export async function getPostSource(postName) {
     mdxOptions(options) {
       options.remarkPlugins = [
         ...(options.remarkPlugins ?? []),
-        [remarkCodeHike, { theme }],
+        [remarkCodeHike, { theme: "material-palenight" }],
       ]
       return options
     },

diff --git a/examples/next-mdx-remote/pages/posts/[slug].js b/examples/next-mdx-remote/pages/posts/[slug].js
@@ -6,7 +6,6 @@ import path from "path"
 import { postNames, POSTS_PATH } from "../../src/posts"
 import { remarkCodeHike } from "@code-hike/mdx"
 import { CH } from "@code-hike/mdx/components"
-import theme from "shiki/themes/material-palenight.json"
 
 export default function PostPage({ source }) {
   return (
@@ -28,7 +27,9 @@ export const getStaticProps = async ({ params }) => {
 
   const mdxSource = await serialize(source, {
     mdxOptions: {
-      remarkPlugins: [[remarkCodeHike, { autoImport: false, theme }]],
+      remarkPlugins: [
+        [remarkCodeHike, { autoImport: false, theme: "material-palenight" }],
+      ],
       useDynamicImport: true,
     },
   })

diff --git a/examples/nextjs/next.config.js b/examples/nextjs/next.config.js
@@ -1,10 +1,9 @@
 const { remarkCodeHike } = require("@code-hike/mdx")
-const theme = require("shiki/themes/material-palenight.json")
 
 const withMDX = require("@next/mdx")({
   extension: /\.mdx?$/,
   options: {
-    remarkPlugins: [[remarkCodeHike, { theme }]],
+    remarkPlugins: [[remarkCodeHike, { theme: "material-palenight" }]],
   },
 })
 

diff --git a/examples/nextra/next.config.js b/examples/nextra/next.config.js
@@ -1,11 +1,10 @@
 const { remarkCodeHike } = require("@code-hike/mdx")
-const theme = require("shiki/themes/material-palenight.json")
 
 const withNextra = require("nextra")({
   theme: "nextra-theme-docs",
   themeConfig: "./theme.config.mjs",
   mdxOptions: {
-    remarkPlugins: [[remarkCodeHike, { theme }]],
+    remarkPlugins: [[remarkCodeHike, { theme: "material-palenight" }]],
   },
 })
 

diff --git a/examples/nextra/package.json b/examples/nextra/package.json
@@ -13,7 +13,6 @@
     "nextra": "2.4.2",
     "nextra-theme-docs": "2.4.2",
     "react": "^18.1.0",
-    "react-dom": "^18.1.0",
-    "shiki": "^0.10.1"
+    "react-dom": "^18.1.0"
   }
 }
diff --git a/examples/remix/remix.config.js b/examples/remix/remix.config.js
@@ -1,6 +1,4 @@
 const { remarkCodeHike } = require("@code-hike/mdx")
-const theme = require("shiki/themes/dracula.json")
-
 /**
  * @type {import('@remix-run/dev').AppConfig}
  */
@@ -12,6 +10,6 @@ module.exports = {
   // publicPath: "/build/",
   // devServerPort: 8002
   mdx: {
-    remarkPlugins: [[remarkCodeHike, { theme }]],
+    remarkPlugins: [[remarkCodeHike, { theme: "dracula" }]],
   },
 }
Original file line number	Diff line number	Diff line change
Expand Up		@@ -15,3 +15,5 @@ packages/mdx/components.d.ts

		# Contentlayer
		.contentlayer

		todo.md