Docusaurus Prism syntax highlighting not work if using remark-kroki

[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;

[lyrihkaesa]

OK this solve when don't use alias in remarkKroki. How to use alias in remark-kroki + prism highlight? or have another plugin?

```plantuml code-alias-copy=kroki type=plantuml
@startuml

' Definisi komponen
component "Subscription" as Subscription <<component>>
component "Payment" as Payment <<component>>
component "Writer" as Writer <<component>>
component "Article" as Article <<component>>

' Antarmuka
interface "Subscription Details"
interface "Payment Details"
interface "Writer Details"
interface "Article Details"

' Hubungan antarmuka dengan komponen
"Subscription Details" --> Subscription
"Payment Details" --> Payment
"Writer Details" --> Writer
"Article Details" --> Article

' Hubungan antar komponen
Subscription --> "Writer Details"
Payment --> "Writer Details"
Article --> "Writer Details"

@enduml
```

[Airkro]

Seems like you've already made it work? I don't understand...

Okay, there are many ways. Try this:

```plantuml code-alias-copy=plant-uml

### content

```

Because, if we want one diagram, one source code block, we need two different block.

Prismjs can detect both plant-uml and plantuml, and remarkKroki only transform plantuml first, not plant-uml.

[lyrihkaesa]

Nice, this is work correctly. Sorry, im first time learning using plugin docusaurus. and im not good for design fornt end.

```plantuml code-alias-copy=plant-uml
@startuml

@enduml
```

How do I get it to be rendered like this (have button display code/diagrams)?
https://github.com/joethei/obsidian-plantuml.
Do I need to modify the remark-kroki or remark-code-example? Or have any plugin can do?

[Airkro]

remark-kroki + remark-code-example work for any project that uses remark.

But the button switching is beyond what remark can do; it needs custom Docusaurus/React integration.

Create your integration to do anything (I can't show you how, but you can learn by yourself);

Or try tab switching by using remark-docusaurus.

remark-docusaurus just a crude solution that I use for personal purposes, won't make any promises.

// docusaurus.config.mjs
import { remarkCodeExample } from 'remark-code-example';
import { autoTabs } from 'remark-docusaurus';
import { remarkKroki } from 'remark-kroki';

export default {
  presets: [
    [
      'classic',
      {
        docs: {
          beforeDefaultRemarkPlugins: [
            codeExample,
            [
              autoTabs,
              {
                labels: {
                  plantuml: 'PlantUML',
                  'plan-tuml': 'PlantUML Code'
                }
              }
            ],
            [
              kroki,
              {}
            ]
          ]
        }
      }
    ]
  ]
};

```plantuml code-alias-copy=plant-uml copy-as-tab

### content

```

[lyrihkaesa]

Thank you so much for introducing me to the Remark plugin you developed. It has been incredibly helpful in improving my documentation with Docusaurus, and I truly appreciate your work!

I would also love to see UI examples in the plugin’s documentation, as they would be very helpful for someone like me who is not very experienced in frontend development.

By the way, how can I change the tab labels? I’d like to set plantuml: "Diagrams PlantUML" and plant-uml: "Code PlantUML".

```plantuml code-alias-copy=plant-uml tab
@startuml

' Definisi komponen
component "Subscription" as Subscription <<component>>
component "Payment" as Payment <<component>>
component "Writer" as Writer <<component>>
component "Article" as Article <<component>>

' Antarmuka
interface "Subscription Details"
interface "Payment Details"
interface "Writer Details"
interface "Article Details"

' Hubungan antarmuka dengan komponen
"Subscription Details" --> Subscription
"Payment Details" --> Payment
"Writer Details" --> Writer
"Article Details" --> Article

' Hubungan antar komponen
Subscription --> "Writer Details"
Payment --> "Writer Details"
Article --> "Writer Details"

@enduml
```

// docusaurus.config.js
import { remarkKroki } from 'remark-kroki';
import { remarkCodeExample } from 'remark-code-example';
import { autoTabs } from 'remark-docusaurus';

plugins: [
  [
        '@docusaurus/plugin-content-docs',
        {
          id: 'learning',
          path: 'articles/learning',
          routeBasePath: 'learning',
          sidebarPath: require.resolve('./sidebars.js'),
          beforeDefaultRemarkPlugins: [
            [
              remarkCodeExample,
              {
                target: 'mdx3',
              },
            ],
            [
              autoTabs,
              {
                plantuml: 'PlantUML',
                'plant-uml': 'PlantUML Code',
              },
            ],
            [
              remarkKroki,
              {
                // ...options here
                alias: ['plantuml'],
                target: 'mdx3',
                server: 'https://kroki.io',
              },
            ],
          ],
        },
      ],
],

[Airkro]

I'm sorry for making the wrong example, I updated it. You can use options.labels to do that.