# Using Kdu in Markdown

# Browser API Access Restrictions

Because KduPress applications are server-rendered in Node.js when generating static builds, any Kdu usage must conform to the universal code requirements. In short, make sure to only access Browser / DOM APIs in beforeMount or mounted hooks.

If you are using or demoing components that are not SSR-friendly (for example, contain custom directives), you can wrap them inside the built-in <ClientOnly> component:

<ClientOnly>
  <NonSSRFriendlyComponent/>
</ClientOnly>

Note this does not fix components or libraries that access Browser APIs on import. To use code that assumes a browser environment on import, you need to dynamically import them in proper lifecycle hooks:

<script>
export default {
  mounted () {
    import('./lib-that-access-window-on-import').then(module => {
      // use code
    })
  }
}
</script>

If your module export default a Kdu component, you can register it dynamically:

<template>
  <component k-if="dynamicComponent" :is="dynamicComponent"></component>
</template>

<script>
export default {
  data() {
    return {
      dynamicComponent: null
    }
  },

  mounted () {
    import('./lib-that-access-window-on-import').then(module => {
      this.dynamicComponent = module.default
    })
  }
}
</script>

Also see:

• Kdu.js > Dynamic Components (opens new window)

# Templating

# Interpolation

Each Markdown file is first compiled into HTML and then passed on as a Kdu component to kdu-loader. This means you can use Kdu-style interpolation in text:

Input

{{ 1 + 1 }}

Output

2

# Directives

Directives also work:

Input

<span k-for="i in 3">{{ i }} </span>

Output

1 2 3 

# Access to Site & Page Data

The compiled component does not have any private data but does have access to the site metadata and computed properties. For example:

Input

{{ $page }}

Output

{
  "path": "/using-kdu.html",
  "title": "Using Kdu in Markdown",
  "frontmatter": {}
}

# Escaping

By default, fenced code blocks are automatically wrapped with k-pre. To display raw mustaches or Kdu-specific syntax inside inline code snippets or plain text, you need to wrap a paragraph with the k-pre custom container:

Input

::: k-pre
`{{ This will be displayed as-is }}`
:::

Output

# Using Components

Any *.kdu files found in .kdupress/components are automatically registered as global (opens new window), async (opens new window) components. For example:

.
└─ .kdupress
   └─ components
      ├─ demo-1.kdu
      ├─ OtherComponent.kdu
      └─ Foo
         └─ Bar.kdu

Inside any Markdown file you can then directly use the components (names are inferred from filenames):

<demo-1/>
<OtherComponent/>
<Foo-Bar/>

Hello this is <demo-1>

This is another component

Hello this is <Foo-Bar>

# Using Components In Headers

You can use Kdu components in the headers, but note the difference between the following syntaxes:

 # text <Tag/> 

 # text `<Tag/>` 

The HTML wrapped by <code> will be displayed as-is; only the HTML that is not wrapped will be parsed by Kdu.

# Using Pre-processors

KduPress has built-in webpack support for the following pre-processors: sass, scss, less, stylus and pug. All you need to do is installing the corresponding dependencies. For example, to enable sass:

yarn add -D sass-loader node-sass

Now you can use the following in Markdown and theme components:

<style lang="sass">
.title
  font-size: 20px
</style>

Using <template lang="pug"> requires installing pug and pug-plain-loader:

yarn add -D pug pug-plain-loader

# Script & Style Hoisting

Sometimes you may need to apply some JavaScript or CSS only to the current page. In those cases, you can directly write root-level <script> or <style> blocks in the Markdown file. These will be hoisted out of the compiled HTML and used as the <script> and <style> blocks for the resulting Kdu single-file component:

# Built-In Components

# OutboundLink stable

The indicator (opens new window) is used to denote external links. In KduPress, this component has been followed by every external link.

# ClientOnly stable

See Browser API Access Restrictions.

# Content

• Props:

  • pageKey - string, page's hash key, defaults to current page’s key.
  • slotKey - string, key of Markdown slot. Defaults to default slot.

• Usage：

Specify a specific slot for a specific page (.md) for rendering. This is useful when using a Custom Layout or Writing a theme:

<Content/>

Also see:

• Global Computed > $page
• Markdown Slot
• Writing a theme > Content Outlet

# Badge beta default theme

• Props:

  • text - string
  • type - string, optional value: "tip"|"warning"|"error", defaults to "tip".
  • vertical - string, optional value: "top"|"middle", defaults to "top".

• Usage:

You can use this component in a header to add some status for an API:

### Badge <Badge text="beta" type="warning"/> <Badge text="default theme"/>

Also see:

• Using Components In Headers