Skip to content

Commit

Permalink
docs: typos
Browse files Browse the repository at this point in the history
  • Loading branch information
@farnabaz
farnabaz committed Aug 25, 2023
1 parent 2458a25 commit d98b11c
Showing 1 changed file with 29 additions and 32 deletions.
61 changes: 29 additions & 32 deletions docs/content/0.index.md
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,15 @@
---
title: Home
description: MDC stands for MarkDown Components. This syntax supercharges regular Markdown to write documents interacting deeply with any Vue component
description: MDC stands for Markdown Components. This syntax supercharges regular Markdown to write documents interacting deeply with any Vue component
---

# Nuxt MDC

MDC stands for MarkDown Components. This syntax supercharges regular Markdown to write documents interacting deeply with any Vue component.
MDC stands for Markdown Components. This syntax supercharges regular Markdown to write documents interacting deeply with any Vue component.

## Setup


Add `nuxt-mdc` dependency to your project:
Add the `nuxt-mdc` dependency to your project:

::code-group
```bash [Yarn]
Expand All @@ -32,17 +31,17 @@ export default defineNuxtConfig({
})
```

That's it, you can start writing and rendering markdown files ✨
That's it! You can start writing and rendering markdown files ✨

## Live Demo

:mdc-playground

## Parsing Markdown

Nuxt MDC exposes a handy helper to parse MDC files. You can import `parseMarkdown` function from `nuxt-mdc/runtime` and use it to parse markdown files written with MDC syntax.
Nuxt MDC exposes a handy helper to parse MDC files. You can import the `parseMarkdown` function from `nuxt-mdc/runtime` and use it to parse markdown files written with MDC syntax.

### Nodejs
### Node.js

```ts [/server/api/parse-mdc.ts]
import { parseMarkdown } from 'nuxt-mdc/runtime'
Expand All @@ -64,7 +63,7 @@ export default eventHandler(async () => {

### Browser

`parseMarkdown` function is universal helper and you can also use it in browser. For example inside a Vue component.
The `parseMarkdown` function is a universal helper, and you can also use it in the browser, for example inside a Vue component.

```vue [mdc-test.vue]
<template>
Expand All @@ -76,7 +75,7 @@ import { parseMarkdown } from 'nuxt-mdc/runtime'
const props = defineProps({
md: {
type: String, 0 -
type: String,
default: () => '::alert\nMissing markdown input\n::'
}
})
Expand All @@ -87,27 +86,26 @@ const ast = await parseMarkdown(props.md)

### Options

`parseMarkdown` helper also accepts options as second argumant to control parser's behavior. (Checkout [`MDCParseOptions` interface↗︎](https://github.com/nuxtlabs/nuxt-mdc/blob/main/src/runtime/types/parser.ts)).
The `parseMarkdown` helper also accepts options as the second argument to control the parser's behavior. (Checkout [`MDCParseOptions` interface↗︎](https://github.com/nuxtlabs/nuxt-mdc/blob/main/src/runtime/types/parser.ts)).

| Name | Default | Description |
| -- | -- | -- |
| `remark.plugins` | `{}` | Register / Configure parser's remark plugins. |
| `rehype.options` | `{}` | Configure `remark-rehype` options. |
| `rehype.plugins` | `{}` | Register / Configure parser's rehype plugins. |
| `highlight` | `false` | Contorl whether code blocks should highlight or not. You can alsoo provide custom highlighter. |
| `toc.depth`) | `2` | Maximum heading depth to include in the table of contents. |
| `toc.searchDepth`) | `2` | Maximum depth of nested tags to search for heading. |
| `highlight` | `false` | Control whether code blocks should highlight or not. You can also provide a custom highlighter. |
| `toc.depth` | `2` | Maximum heading depth to include in the table of contents. |
| `toc.searchDepth` | `2` | Maximum depth of nested tags to search for heading. |

Checkout [`MDCParseOptions` types↗︎](https://github.com/nuxtlabs/nuxt-mdc/blob/main/src/runtime/types/parser.ts).

## Rendering (Vue)

`nuxt-mdc` exposes three components to render markdown files.


### `<MDCRenderer>`

This component will take the result of [`parseMarkdown`](#parsing-markdown) function and render the contents. For example this is a extended version of sample code in [Browser section](#browser) which uses `MDCRenderer` to render the parsed markdown.
This component will take the result of [`parseMarkdown`](#parsing-markdown) function and render the contents. For example, this is an extended version of the sample code in the [Browser section](#browser) which uses `MDCRenderer` to render the parsed markdown.

```html [mdc-test.vue]
<template>
Expand All @@ -130,11 +128,11 @@ const ast = await parseMarkdown(props.md)

### `<MDCSlot>`

This component is replacement form Vue's `<slot/>` component which specifically designed for MDC. Using this component you can render a compoennt's children while removing one or multiple wrapping elements. In the below example, Alert component receive a text and it's default slot(children). But if the component render this slot using normal `<slot/>` it will render a `<p>` element around the text.
This component is a replacement for Vue's `<slot/>` component, specifically designed for MDC. Using this component, you can render a component's children while removing one or multiple wrapping elements. In the below example, the Alert component receives text and its default slot (children). But if the component renders this slot using the normal `<slot/>`, it will render a `<p>` element around the text.

```md [markdown.md]
::alert
This is as Alert
This is an Alert
::
```

Expand All @@ -146,20 +144,21 @@ This is as Alert
</div>
</template>
```
It is default behaviour of markdown that wraps every text inside a paragraph. MDC didn't come to break markdown behavious, instead the goal of MDC is to make markdown powerfull. In this example and all similar situations, you can use `<MDCSlot />` to remove unwanted wrappers.

It is the default behavior of markdown to wrap every text inside a paragraph. MDC didn't come to break markdown behavior; instead, the goal of MDC is to make markdown powerful. In this example and all similar situations, you can use `<MDCSlot />` to remove unwanted wrappers.

```html [Alert.vue]
<template>
<div class="alert">
<!-- MDCSlot will only render the actual text wihtout the wrapping <p> -->
<!-- MDCSlot will only render the actual text without the wrapping <p> -->
<MDCSlot unwrap="p" />
</div>
</template>
```

### `<MDC>`

Using `<MDC>` you can parse and render markdown contents right inside your components/pages. This component takes raw markdown, parse it using `parseMarkdown` function and then render it with `<MDCRenderer>`.
Using `<MDC>`, you can parse and render markdown contents right inside your components/pages. This component takes raw markdown, parses it using the `parseMarkdown` function, and then renders it with `<MDCRenderer>`.

```html
<template>
Expand All @@ -177,9 +176,9 @@ Hello MDC

### Prose Components

Prose component are list group of components that will be rendered instead of regular html tags. For example, instead of rendering `<p>` tag, `nuxt-mdc` rendera `<ProseP>` component. This is useful when you want to add extra features to your markdown files. For example, you can add a `copy` button to your code blocks.
Prose components are a list of components that will be rendered instead of regular HTML tags. For example, instead of rendering a `<p>` tag, `nuxt-mdc` renders a `<ProseP>` component. This is useful when you want to add extra features to your markdown files. For example, you can add a `copy` button to your code blocks.

You can disable prose components by setting `prose` option to `false` in `nuxt.config.ts`. Or extend the map of prose components to add your own components.
You can disable prose components by setting the `prose` option to `false` in `nuxt.config.ts`. Or extend the map of prose components to add your own components.

```ts [nuxt.config.ts]
export default defineNuxtConfig({
Expand Down Expand Up @@ -224,8 +223,6 @@ Here is the list of available prose components:
| `em` | `<ProseEm>` | Emphasis |
| `strong` | `<ProseStrong>` | Strong |



## Configurations

You can configure the module by providing the `mdc` property in your `nuxt.config.js`; here are the default options:
Expand All @@ -238,25 +235,25 @@ export default defineNuxtConfig({
mdc: {
remarkPlugins: {
plugins: {
// Register/Configure remark plugin to extend parser
// Register/Configure remark plugin to extend the parser
}
},
rehypePlugins: {
options: {
// Configure rehype options to extend parser
// Configure rehype options to extend the parser
},
plugins: {
// Register/Configure rehype plugin to extend parser
// Register/Configure rehype plugin to extend the parser
}
},
headings: {
anchorLinks: {
// Enable/Disable heading anchor links. { h1: true, h2: false }
}
}
highlight: false, // Conntrol syntax highlighting
},
highlight: false, // Control syntax highlighting
components: {
prose: false, // Add predefined map to render Prose Components instead of html tags, like p, ul, code
prose: false, // Add predefined map to render Prose Components instead of HTML tags, like p, ul, code
map: {
// This map will be used in `<MDCRenderer>` to control rendered components
}
Expand All @@ -269,15 +266,15 @@ Checkout [`ModuleOptions` types↗︎](https://github.com/nuxtlabs/nuxt-mdc/blob

## Contributing

You can contribute to this module online with CodeSandBox:
You can contribute to this module online with CodeSandbox:

[![Edit nuxt-mdc](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/nuxtlabs/nuxt-mdc/tree/main/?fontsize=14&hidenavigation=1&theme=dark)

Or locally:

1. Clone this repository
2. Install dependencies using `pnpm install`
3. Start development server using `pnpm dev`
3. Start the development server using `pnpm dev`

## License

Expand Down

0 comments on commit d98b11c

Please sign in to comment.