Markdown

In addition to React syntax, Codespark also supports markdown rendering. There are two ways to preview markdown code:

Import markdown file as a React component
Use framework for pure markdown rendering

Import Markdown File

You can import a markdown file just like a regular React component.

import Doc from './doc.md';

Use Markdown Framework

First, you need to install an additional npm package, then pass the framework prop to the component.

npm install @codespark/framework

import {  } from '@codespark/framework/markdown';

<Codespark ={} />;

Once the framework is configured, simply pass your markdown code to the code prop to preview it.

import { markdown } from '@codespark/framework/markdown';
import { Codespark } from '@codespark/react';

export default function App() {
  return <Codespark framework={markdown} name="index.md" code="# Hello World" tailwindcss={false} />;
}

Note

If you choose to use the markdown framework, Codespark component with framework={markdown} will only support markdown syntax.

Note

By changing the name suffix to .md like index.md will enable markdown syntax highlighting in the editor.

And you also need to disable Tailwind CSS by setting tailwindcss={false}, because Tailwind CSS normalizes default element styles with Preflight.

Import Markdown File

Use Markdown Framework

On this page