🔧 fix(docusaurus.config.js): fix import statement for remarkCodeHike to resolve linting error

✨ feat(docusaurus.config.js): add support for code highlighting with remarkCodeHike plugin

docs/docusaurus.config.js

@@ -1,127 +1,131 @@
 const lightCodeTheme = require("prism-react-renderer/themes/github");
 
+const { remarkCodeHike } = require("@code-hike/mdx");
 // With JSDoc @type annotations, IDEs can provide config autocompletion
 /** @type {import('@docusaurus/types').DocusaurusConfig} */
-(
+module.exports = {
-  module.exports = {
+  title: "Langflow Documentation",
-    title: "Langflow Documentation",
+  tagline: "Langflow is a GUI for LangChain, designed with react-flow",
-    tagline: "Langflow is a GUI for LangChain, designed with react-flow",
+  favicon: "img/favicon.ico",
-    favicon: "img/favicon.ico",
+  url: "https://logspace-ai.github.io",
-    url: "https://logspace-ai.github.io",
+  baseUrl: "/",
-    baseUrl: "/",
+  onBrokenLinks: "throw",
-    onBrokenLinks: "throw",
+  onBrokenMarkdownLinks: "warn",
-    onBrokenMarkdownLinks: "warn",
+  organizationName: "logspace-ai",
-    organizationName: "logspace-ai",
+  projectName: "langflow",
-    projectName: "langflow",
+  trailingSlash: false,
-    trailingSlash: false,
+  customFields: {
-    customFields: {
+    mendableAnonKey: process.env.MENDABLE_ANON_KEY,
-      mendableAnonKey: process.env.MENDABLE_ANON_KEY,
+  },
-    },
+  i18n: {
-    i18n: {
+    defaultLocale: "en",
-      defaultLocale: "en",
+    locales: ["en"],
-      locales: ["en"],
+  },
-    },
+  presets: [
-    presets: [
+    [
-      [
+      "@docusaurus/preset-classic",
-        "@docusaurus/preset-classic",
+      /** @type {import('@docusaurus/preset-classic').Options} */
-        /** @type {import('@docusaurus/preset-classic').Options} */
-        ({
-          docs: {
-            routeBasePath: "/",
-            sidebarPath: require.resolve("./sidebars.js"),
-            path: "docs",
-            // sidebarPath: 'sidebars.js',
-          },
-          theme: {
-            customCss: require.resolve("./src/css/custom.css"),
-          },
-        }),
-      ],
-    ],
-    plugins: [
-      ["docusaurus-node-polyfills", { excludeAliases: ["console"] }],
-      "docusaurus-plugin-image-zoom",
-      // ....
-      async function myPlugin(context, options) {
-        return {
-          name: "docusaurus-tailwindcss",
-          configurePostCss(postcssOptions) {
-            // Appends TailwindCSS and AutoPrefixer.
-            postcssOptions.plugins.push(require("tailwindcss"));
-            postcssOptions.plugins.push(require("autoprefixer"));
-            return postcssOptions;
-          },
-        };
-      },
-    ],
-    themeConfig:
-      /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
       ({
-        navbar: {
+        docs: {
-          hideOnScroll: true,
+          beforeDefaultRemarkPlugins: [[remarkCodeHike, { theme: "nord" }]],
-          title: "Langflow",
+          routeBasePath: "/",
-          logo: {
+          sidebarPath: require.resolve("./sidebars.js"),
-            alt: "Langflow",
+          path: "docs",
-            src: "img/chain.png",
+          // sidebarPath: 'sidebars.js',
-          },
+        },
-          items: [
+        theme: {
-            // right
+          customCss: [
-            {
+            require.resolve("@code-hike/mdx/styles.css"),
-              position: "right",
+            require.resolve("./src/css/custom.css"),
-              href: "https://github.com/logspace-ai/langflow",
-              position: "right",
-              className: "header-github-link",
-              target: "_blank",
-              rel: null,
-            },
-            {
-              position: "right",
-              href: "https://twitter.com/logspace_ai",
-              position: "right",
-              className: "header-twitter-link",
-              target: "_blank",
-              rel: null,
-            },
-            {
-              position: "right",
-              href: "https://discord.gg/EqksyE2EX9",
-              position: "right",
-              className: "header-discord-link",
-              target: "_blank",
-              rel: null,
-            },
           ],
         },
-        tableOfContents: {
-          minHeadingLevel: 2,
-          maxHeadingLevel: 5,
-        },
-        colorMode: {
-          defaultMode: "light",
-          disableSwitch: true,
-          respectPrefersColorScheme: false,
-        },
-        announcementBar: {
-          content:
-            '⭐️ If you like ⛓️Langflow, star it on <a target="_blank" rel="noopener noreferrer" href="https://github.com/logspace-ai/langflow">GitHub</a>! ⭐️',
-          backgroundColor: "#B53D38", //Mustard Yellow #D19900 #D4B20B - Salmon #E9967A
-          textColor: "#fff",
-          isCloseable: false,
-        },
-        footer: {
-          links: [],
-          copyright: `Copyright © ${new Date().getFullYear()} Logspace.`,
-        },
-        zoom: {
-          selector: ".markdown :not(a) > img:not(.no-zoom)",
-          background: {
-            light: "rgba(240, 240, 240, 0.9)",
-          },
-          config: {},
-        },
-        prism: {
-          theme: lightCodeTheme,
-        },
       }),
-  }
+    ],
-);
+  ],
+  plugins: [
+    ["docusaurus-node-polyfills", { excludeAliases: ["console"] }],
+    "docusaurus-plugin-image-zoom",
+    // ....
+    async function myPlugin(context, options) {
+      return {
+        name: "docusaurus-tailwindcss",
+        configurePostCss(postcssOptions) {
+          // Appends TailwindCSS and AutoPrefixer.
+          postcssOptions.plugins.push(require("tailwindcss"));
+          postcssOptions.plugins.push(require("autoprefixer"));
+          return postcssOptions;
+        },
+      };
+    },
+  ],
+  themes: ["mdx-v2"],
+  themeConfig:
+    /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
+    ({
+      navbar: {
+        hideOnScroll: true,
+        title: "Langflow",
+        logo: {
+          alt: "Langflow",
+          src: "img/chain.png",
+        },
+        items: [
+          // right
+          {
+            position: "right",
+            href: "https://github.com/logspace-ai/langflow",
+            position: "right",
+            className: "header-github-link",
+            target: "_blank",
+            rel: null,
+          },
+          {
+            position: "right",
+            href: "https://twitter.com/logspace_ai",
+            position: "right",
+            className: "header-twitter-link",
+            target: "_blank",
+            rel: null,
+          },
+          {
+            position: "right",
+            href: "https://discord.gg/EqksyE2EX9",
+            position: "right",
+            className: "header-discord-link",
+            target: "_blank",
+            rel: null,
+          },
+        ],
+      },
+      tableOfContents: {
+        minHeadingLevel: 2,
+        maxHeadingLevel: 5,
+      },
+      colorMode: {
+        defaultMode: "light",
+        disableSwitch: true,
+        respectPrefersColorScheme: false,
+      },
+      announcementBar: {
+        content:
+          '⭐️ If you like ⛓️Langflow, star it on <a target="_blank" rel="noopener noreferrer" href="https://github.com/logspace-ai/langflow">GitHub</a>! ⭐️',
+        backgroundColor: "#B53D38", //Mustard Yellow #D19900 #D4B20B - Salmon #E9967A
+        textColor: "#fff",
+        isCloseable: false,
+      },
+      footer: {
+        links: [],
+        copyright: `Copyright © ${new Date().getFullYear()} Logspace.`,
+      },
+      zoom: {
+        selector: ".markdown :not(a) > img:not(.no-zoom)",
+        background: {
+          light: "rgba(240, 240, 240, 0.9)",
+        },
+        config: {},
+      },
+      // prism: {
+      //   theme: require("prism-react-renderer/themes/dracula"),
+      // },
+    }),
+};