Docusaurus Prism syntax highlighting not work if using remark-kroki · Issue #1 · show-docs/remark-code-example · GitHub
Skip to content

Docusaurus Prism syntax highlighting not work if using remark-kroki #1

Description

@lyrihkaesa

Why Syntax highlight prism not work? show-docs/remark-kroki#7

// @ts-nocheck
// Note: type annotations allow type checking and IDEs autocompletion

import { themes as prismThemes } from 'prism-react-renderer';
import { remarkKroki } from 'remark-kroki';
import { remarkCodeExample } from 'remark-code-example';

/** @type {import('@docusaurus/types').Config} */
const config = {
  presets: [
    [
      'classic',
      /** @type {import('@docusaurus/preset-classic').Options} */
      ({
        docs: {
          path: 'articles/docs',
          routeBasePath: 'docs',
          sidebarPath: require.resolve('./sidebars.js'),
          remarkPlugins: [
           [
              remarkCodeExample,
              {
                target: 'mdx3',
              },
            ],
            [
              remarkKroki,
              {
                // ...options here
                alias: ['plantuml'],
                target: 'mdx3',
                server: 'https://kroki.io',
              },
            ],
          ],
        },
      }),
    ],
  ],

  plugins:
    /** @type {import('@docusaurus/preset-classic').plugins} */
    [
      [
        '@docusaurus/plugin-content-docs',
        {
          id: 'learning',
          path: 'articles/learning',
          routeBasePath: 'learning',
          sidebarPath: require.resolve('./sidebars.js'),
          remarkPlugins: [
            [
              remarkCodeExample,
              {
                target: 'mdx3',
              },
            ],
            [
              remarkKroki,
              {
                // ...options here
                alias: ['plantuml'],
                target: 'mdx3',
                server: 'https://kroki.io',
              },
            ],
          ],
        },
      ],
    ],

  themeConfig:
    /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
    ({
      // Replace with your project's social card
      image: 'img/ksa-logo-gradient-blue.png',
      docs: {
//
      },
      navbar: {
   //
      },
      footer: {
     //
      },
      prism: {
        theme: prismThemes.oneLight,
        darkTheme: prismThemes.oneDark,
        additionalLanguages: ['powershell', 'bash', 'php', 'java', 'dart', 'ignore', 'plant-uml'],
      },
    }),
};

module.exports = config;

Image

Image

Image

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions