nuxt-themes / docus

Write beautiful documentations with Nuxt and Markdown.
https://docus.dev
MIT License
1.61k stars 156 forks source link

shiki highlighter not working for non-default languages causes 404 #983

Open PGimenez opened 1 year ago

PGimenez commented 1 year ago

If I try to highlight a language other than the default like html or js, the site stops working and it can't be built. The browser shows a 404:

{
  "statusCode": 404,
  "statusMessage": "Cannot find any path matching /.",
  "stack": []
}

To attempt to debug this, I've started a docus project from scratch with npx nuxi@latest init docs -t themes/docus and added a snippet to the index page

```julia
if end
if end
This is my nuxt.config.ts:

```ts
export default defineNuxtConfig({
    // https://github.com/nuxt-themes/docus
    extends: '@nuxt-themes/docus',
    devtools: { enabled: true },
    content: {
        highlight: {
            theme: {
                dark: "github-dark",
                default: "github-light",
            },
            preload: ["julia", "rust"],
        },
    },
    modules: [
        // Remove it if you don't use Plausible analytics
        // https://github.com/nuxt-modules/plausible
        '@nuxtjs/plausible'
    ]
})

And this is the error I'm getting when npm run dev

[nuxt] [request error] [unhandled] [500] No grammar provided for <source.rust>
  at a (./node_modules/shikiji/dist/core.mjs:434:15520)
  at t.ScopeDependencyProcessor.processQueue (./node_modules/shikiji/dist/core.mjs:434:17212)
  at Registry._loadGrammar (./node_modules/shikiji/dist/core.mjs:434:30884)
  at async Registry.loadLanguage (./node_modules/shikiji/dist/core.mjs:549:15)
  at async Registry.loadLanguages (./node_modules/shikiji/dist/core.mjs:573:7)
  at async Object.loadLanguage (./node_modules/shikiji/dist/core.mjs:682:5)
  at Object.getHighlightedAST (./node_modules/@nuxtjs/mdc/dist/runtime/shiki/highlighter.mjs:44:7)
  at <anonymous> (./node_modules/@nuxtjs/mdc/dist/runtime/shiki/event-handler.mjs:16:12)
  at async Object.handler (./node_modules/h3/dist/index.mjs:1630:19)
  at async toNodeHandle (./node_modules/h3/dist/index.mjs:1840:7)
[nitro] [unhandledRejection] FetchError: [GET] "/api/_mdc/highlight?code=if+end%0A&lang=rust&theme=%7B%22default%22:%22github-light%22,%22dark%22:%22github-dark%22%7D&highlights=%5B%5D": 500
    at runNextTicks (node:internal/process/task_queues:60:5)
    at process.processImmediate (node:internal/timers:449:9)
    at async $fetchRaw2 (file:///Users/pere/genie/docs/docs/node_modules/ofetch/dist/shared/ofetch.00501375.mjs:256:14)
    at async $fetch2 (file:///Users/pere/genie/docs/docs/node_modules/ofetch/dist/shared/ofetch.00501375.mjs:261:15)
    at async Promise.all (index 1)
    at <anonymous> (/Users/pere/genie/docs/docs/node_modules/@nuxtjs/mdc/dist/runtime/parser/shiki.mjs:50:7)

It seems that the error is related to grammar files, but I don't know how to fix it. I've tried downgrading to earlier shiki versions but that didn't fix it.

McSneaky commented 1 year ago

Run into same issue. Decided to just drop syntax highlight

Wasted already whole week trying to get company docs up and running again, coz of different Nuxt and Docus bugs :|

PGimenez commented 1 year ago

I ended up switching to highlightjs. I tried following the markdown highlighter instructions but couldn't make it work, so I ended up modifying the default template to call highlightjs after the page is loaded.

<script lang="ts" setup>
import { onMounted } from 'vue';
import hljs from 'highlight.js'; // Import highlight.js if needed

onMounted(() => {
    console.log("mounted")
    document.querySelectorAll('pre code').forEach((block) => {
        hljs.highlightBlock(block);
    });
});
</script>

<template>
    <DocsPageLayout>
        <slot />
    </DocsPageLayout>
</template>

<style>
.hljs {
    width: 100%
}
</style>
ariesmaulana commented 1 year ago

I got a similar issue, after upgrading docus theme to (v1.14.9) it fix the issue

return

at Object.getHighlightedAST (./node_modules/@nuxtjs/mdc/dist/runtime/shiki/highlighter.mjs:44:7)  
  at <anonymous> (./node_modules/@nuxtjs/mdc/dist/runtime/shiki/event-handler.mjs:16:12)  
  at async Object.handler (./node_modules/h3/dist/index.mjs:1630:19)  
  at async toNodeHandle (./node_modules/h3/dist/index.mjs:1840:7)
[nuxt] [request error] [unhandled] [500] No grammar provided for <source.python>

after upgrade, no more issue