Markdoc fails to apply default markdown styling on .mdoc files

vrachtwagen commented 1 year ago

Astro Info

npm create astro@latest
npx astro add markdoc

If this issue only occurs in one browser, which browser is a problem?

Chrome, Firefox

Describe the Bug

New project install with command: npm create astro@latest Prompts Rundown: Prompt: How would you like to start your new project?

Use blog template

Prompt: Install dependencies?

Yes

Prompt: Do you plan to write TypeScript?

No

Followed by the command: npx astro add markdoc Prompts Rundown:

╭───────────────────────────────╮ │ npm install @astrojs/markdoc │ ╰───────────────────────────────╯ √ Continue?

Yes

✔ Installing dependencies...

Astro will make the following changes to your config file:

╭ astro.config.mjs ──────────────────────────────╮ │ import { defineConfig } from 'astro/config'; │ │ import mdx from '@astrojs/mdx'; │ │ import sitemap from '@astrojs/sitemap'; │ │ │ │ import markdoc from "@astrojs/markdoc"; │ │ // https://astro.build/config │ │ export default defineConfig({ │ │ site: 'https://example.com', │ │ integrations: [mdx(), sitemap(), markdoc()] │ │ }); │ ╰────────────────────────────────────────────────╯ √ Continue?

Yes

Navigate to the blog templated astro project folder. Select any file in src/content/blog with file extension .md paste any of the following:

[x] Write the press release
[ ] Update the website
[ ] Contact the media

OR

{
  "firstName": "John",
  "lastName": "Smith",
  "age": 25
}

to the main .md body, then run npm run dev to see the correctly rendered page. Now, change the file extension from .md to .mdoc confirm that no styling is applied to Unordered List In case of Fenced Code Block no contrasting background is applied

These particular examples are taken from https://www.markdownguide.org/cheat-sheet/

What's the expected result?

For .mdoc and .md to behave consistently in their application of default Markdown style.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/withastro-astro-rw3dm6?file=src%2Fcontent%2Fblog%2Fmarkdoc.mdoc

Participation

[ ] I am willing to submit a pull request for this issue.

vrachtwagen commented 1 year ago

Using the https://markdoc.dev/ copy&pasting the:

{
  "firstName": "John",
  "lastName": "Smith",
  "age": 25
}

Has styling consistent with the default markdown file

bluwy commented 1 year ago

.md and .mdoc are processed differently. Swapping to the other extension doesn't guarantee that they look the same. In this case, the checklist and code block in .md are handled by remark-gfm and remark-shiki respectively. But remark plugins don't work in .mdoc.

In markdoc, in doesn't support the github-flavoured markdown checklist syntax, as seen in https://markdoc.dev/. For code blocks, check out https://docs.astro.build/en/guides/integrations-guide/markdoc/#syntax-highlighting.

Closing as expected.

withastro / astro