tabler/site/content/pages/test.mdx

---
title: You don't vote for kings.
description: Why do you think that she is a witch? How do you know she is a witch? Well, I didn't vote for you. Where'd you get the coconuts? Why? We shall say 'Ni' again to you, if you do not appease us.
robots: noindex, nofollow
---

I am your king. Well, I didn't vote for you. It's only a model. __…Are you suggesting that coconuts migrate?__ *Well, how'd you become king, then?* Well, how'd you become king, then?

```html example
<span class="avatar" />
```

---

```html example code
<span class="avatar" />
```

---

```html
<span class="avatar" />
```

SmartyPants can perform the following transformations:

* Straight quotes ( " and ' ) into “curly” quote HTML entities
* Backticks-style quotes (``like this'') into “curly” quote HTML entities
* Dashes (“--” and “---”) into en- and em-dash entities
* Three consecutive dots (“...”) into an ellipsis entity

## Found them? In Mercia?! The coconut's tropical!

Well, she turned me into a newt. But you are dressed as one… It's only a model. Well, how'd you become king, then?

1. What do you mean?
2. Well, how'd you become king, then?
3. You can't expect to wield supreme power just 'cause some watery tart threw a sword at you!

### On second thoughts, let's not go there. It is a silly place.

Why do you think that she is a witch? But you are dressed as one… Look, my liege! Now, look here, my good man. Bloody Peasant!

* Where'd you get the coconuts?
* Shut up! [Docs](/docs)
* The swallow may fly south with the sun, and the house martin or the plover may seek warmer climes in winter, yet these are not strangers to our land.

Shh! Knights, I bid you welcome to your new home. Let us ride to Camelot! But you are dressed as one… Well, I got better. The Lady of the Lake, her arm clad in the purest shimmering samite, held aloft Excalibur from the bosom of the water, signifying by divine providence that I, Arthur, was to carry Excalibur. That is why I am your king.

![Image description](https://images.unsplash.com/photo-1672244438282-aab5aae2bc2a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1212&q=80)

Bring her forward! Look, my liege! The swallow may fly south with the sun, and the house martin or the plover may seek warmer climes in winter, yet these are not strangers to our land. …Are you suggesting that coconuts migrate?

What do you mean? Well, what do you want? It's only a model. Bloody Peasant!

## Example

You don't frighten us, English pig-dogs! Go and boil your bottoms, sons of a silly person! I blow my nose at you, so-called Ah-thoor Keeng, you and all your silly English K-n-n-n-n-n-n-n-niggits! Look, my liege!

Why? Shut up! Will you shut up?! Look, my liege! Listen. Strange women lying in ponds distributing swords is no basis for a system of government. Supreme executive power derives from a mandate from the masses, not from some farcical aquatic ceremony.

## Table

|sdfsdfsdf|Sdfsdfsdf|
|-|-|
|fghfghjfghj | sdfsdf |
|dfghdfgh | Sdfsdfsdfsdf `sdfsd` sdfsdf|

## Code

```js
function $initHighlight(block, flags) {
  try {
    if (block.className.search(/\bno\-highlight\b/) != -1)
      return processBlock(block, true, 0x0F) + ' class=""';
  } catch (e) {
    /* handle exception */
  }
  for (var i = 0 / 2; i < classes.length; i++) { // "0 / 2" should not be parsed as regexp
    if (checkCondition(classes[i]) === undefined)
      return /\d+/g;
  }
}
```

But you are dressed as one… Did you dress her up like this? Listen. Strange women lying in ponds distributing swords is no basis for a system of government. Supreme executive power derives from a mandate from the masses, not from some farcical aquatic ceremony.


```css
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  body:first-of-type pre::after {
    content: 'highlight: ' attr(class);
  }
}

@import url('print.css');
@page:right {
 margin: 1cm 2cm 1.3cm 4cm;
}

@font-face {
  font-family: Chunkfive; src: url('Chunkfive.otf');
}

div.text,
#content,
li[lang=ru] {
  font: Tahoma, Chunkfive, sans-serif;
  background: url('hatch.png') /* wtf? */;  color: #F0F0F0 !important;
  width: 100%;
}
```

## Test

I have to push the pram a lot. You don't vote for kings. …Are you suggesting that coconuts migrate? And the hat. She's a witch! Be quiet!

## Test

I'm not a witch. You don't vote for kings. On second thoughts, let's not go there. It is a silly place. You don't vote for kings. What do you mean?

## Test 1

He hasn't got shit all over him. I don't want to talk to you no more, you empty-headed animal food trough water! I fart in your general direction! Your mother was a hamster and your father smelt of elderberries! Now leave before I am forced to taunt you a second time!

The swallow may fly south with the sun, and the house martin or the plover may seek warmer climes in winter, yet these are not strangers to our land. We shall say 'Ni' again to you, if you do not appease us. [Gumroad](https://app.gumroad.com)

Well, we did do the nose. Well, we did do the nose. Did you dress her up like this? You don't frighten us, English pig-dogs! Go and boil your bottoms, sons of a silly person! I blow my nose at you, so-called Ah-thoor Keeng, you and all your silly English K-n-n-n-n-n-n-n-niggits!

## Docs Theme

Nextra Docs Theme is a theme that includes almost everything you need to build a modern documentation website. It includes a top navigation bar, a search bar, a pages sidebar, a TOC sidebar, and other built-in components.

This website itself is built with the Nextra Docs Theme.

## Quick Start from Template

### Deploy to Vercel

You can start by creating your own Nextra site and deploying to Vercel by clicking the link:

[![](https://vercel.com/button)](https://vercel.com/new/clone?s=https%3A%2F%2Fgithub.com%2Fshuding%2Fnextra-docs-template&showOptionalTeamCreation=false)

Vercel will fork the [Nextra Docs template](https://github.com/shuding/nextra-docs-template) and deploy the site for you. Once done, every commit in the repository will be deployed automatically.

### Fork the Template

You can also manually fork the [template repository](https://github.com/shuding/nextra-docs-template).

## Start as New Project

<div className="steps">

  ### Install

  To create a Nextra Docs site manually, you have to install **Next.js**, **React**, **Nextra**, and **Nextra Docs Theme**. In your project directory, run the following command to install the dependencies:

  {/* <Tabs items={['pnpm', 'npm', 'yarn']}>
   <Tab>
      ```bash
      pnpm i next react react-dom nextra nextra-theme-docs
      ```
    </Tab>
    <Tab>
      ```bash
      npm i next react react-dom nextra nextra-theme-docs
      ```
    </Tab>
    <Tab>
      ```bash
      yarn add next react react-dom nextra nextra-theme-docs
      ```
    </Tab>
  </Tabs> */}

  <Callout>
     If you already have Next.js installed in your project, you only need to install `nextra` and `nextra-theme-docs` as the add-ons.
  </Callout>

    ### Add Next.js Config

    Create the following `next.config.js` file in your project’s root directory:

  ```js filename="next.config.js"
  const withNextra = require('nextra')({
    theme: 'nextra-theme-docs',
    themeConfig: './theme.config.jsx',
  })

  module.exports = withNextra()

  // If you have other Next.js configurations, you can pass them as the parameter:
  // module.exports = withNextra({ /* other next.js config */ })
  ```

  With the above configuration, Nextra can handle Markdown files in your Next.js project, with the specified theme. Other Nextra configurations can be found in [Guide](/docs/guide).

  ### Create Docs Theme Config

  Lastly, create the corresponding `theme.config.jsx` file in your project’s root directory. This will be used to configure the Nextra Docs theme:

  ```jsx filename="theme.config.jsx"
  export default {
    logo: <span>My Nextra Documentation</span>,
    project: {
      link: 'https://github.com/shuding/nextra',
    },
    // ...
  }
  ```

  Full theme configurations can be found [here](/docs/docs-theme/theme-configuration).

  ### Ready to Go!

  Now, you can create your first MDX page as `pages/index.mdx`:

  ```mdx filename="pages/index.mdx"
  # Welcome to Nextra

  Hello, world!
  ```

  And run the `pnpm next` command to start developing the project! 🎉
</div>

Next, check out the next section to learn about organizing the documentation structure and configuring the website theme:

## What is Tabler?

Tabler is a low-level, opinionated UI component library to build dashboards. It offers components, such as charts, layouts, or input elements, covering the essential parts of a dashboard or analytical interface. Our approach provides great flexibility between beautiful defaults and fast customization. The best way to get started is to check out our templates, called Blocks, for getting a feeling of how components are used and combined.

<TablerSponsorsBanner />

I’m not a witch. You don’t vote for kings. On second thoughts, let’s not go there. It is a silly place. You don’t vote for kings. What do you mean?

## Tips

<TipGood>Good Tip</TipGood>
<TipBad>Good Tip</TipBad>
<TipChanges>Good Tip</TipChanges>

## Options

<OptionsTable>
  <OptionTitle>
    ### `contentDirPath`
    (required)

  </OptionTitle>
  <OptionDescription>
    Path to where the content lives, relative to the root of your project.

    **Example:**

    ```js
    export default makeSource({
      contentDirPath: 'content',
    })
    ```

    This would load content from a `content` directory in your project.

  </OptionDescription>
  <OptionTitle>
    ### `contentDirInclude`

  </OptionTitle>
  <OptionDescription>
    An array of paths that Contentlayer should include, with the following conditions:

    - They can be either files or directories.
    - The paths need to be relative to `contentDirPath` or absolute.
    - An empty array means that all files in `contentDirPath` will be included.
    - Glob/wildcard patterns (e.g. using `*`) are not supported yet.

    This is useful when you have content spread across multiple directories in your project.

    **Default:** `[]`

    **Example:**

    This would target only content in the `docs` directory, while using the default for `contentDirExclude` (see below).

    ```js
    export default makeSource({
      // ...
      contentDirPath: '.',
      contentDirInclude: ['docs'],
    })
    ```

  </OptionDescription>
  <OptionTitle>
    ### `contentDirExclude`

  </OptionTitle>
  <OptionDescription>
    An array of paths that Contentlayer should explicitly exclude, with the following conditions:

    - **Setting this option completely overrides the defaults.**
    - They can be either files or directories.
    - The paths need to be relative to `contentDirPath` or absolute.
    - An empty array means that all files in `contentDirPath` will be included.
    - Glob/wildcard patterns (e.g. using `*`) are not supported yet.

    This is useful when you want to ignore a specific file or directory within your main content directory.

    **Default:** `['node_modules', '.git', '.yarn', '.cache', '.next', '.contentlayer', 'package.json', 'tsconfig.json']`

    **Example:**

    This ignores only the `content/internal-docs` directory, but targets all other content files in the `content` directory.

    ```js
    export default makeSource({
      // ...
      contentDirPath: './content',
      contentDirExclude: ['internal-docs'],
    })
    ```

  </OptionDescription>
  <OptionTitle>
    ### `documentTypes`
    (required)

  </OptionTitle>
  <OptionDescription>
    Your schema definitions for your project. See [`defineDocumentType`](/docs/reference/source-files/define-document-type) for usage.

  </OptionDescription>
  <OptionTitle>
    ### `markdown`

  </OptionTitle>
  <OptionDescription>
    Specify [remark](https://remark.js.org/) and [rehype](https://github.com/rehypejs/rehype) plugins.

    **Options:**

    - `remarkPlugins`
    - `rehypePlugins`

    **Example:**

    Here's an example that adds syntax highlighting with [highlight.js](https://highlightjs.org/usage/) (don't forget to add the css file somewhere e.g. from CDN).

    ```js
    import { makeSource } from '@contentlayer/source-files'
    import highlight from 'rehype-highlight'

    export default makeSource({
      // ...
      markdown: { rehypePlugins: [highlight] },
    })
    ```

    **Taking over the remark pipeline**

    [Under the hood](https://github.com/contentlayerdev/contentlayer/blob/2588c02e266289b8ef0a7ceccdeb804b045ad21a/packages/%40contentlayer/core/src/markdown/markdown.ts#L45), Contentlayer uses its own remark/rehype pipeline, and the plugins specified above are added after the preset plugins (for remark: `remarkFrontmatter`, `remarkParse`, and `remark2rehype`, and for rehype: `rehypeStringify`). However, if you need full control of the pipeline (e.g. [to add `allowDangerousHtml` to the `remark2rehype` plugin so that HTML is not stripped from markdown](https://github.com/contentlayerdev/contentlayer/issues/413), you can specify a function instead of an object:

    ```js
    export default makeSource({
      // ...
      markdown: (builder) => {
        builder.use(remarkFrontmatter)
        builder.use(remarkParse)
        // other remark plugins as you wish
        builder.use(remark2rehype, { allowDangerousHtml: true })
        // other rehype plugins as you wish
        // rehype to html
        builder.use(rehypeStringify)
      }
    })
    ```

  </OptionDescription>
  <OptionTitle>
    ### `mdx`

  </OptionTitle>
  <OptionDescription>
    Follows the same pattern as the `markdown` option, but for MDX processing.

    **Options:**

    - `remarkPlugins`
    - `rehypePlugins`

    **Example:**

    ```js
    import { makeSource } from '@contentlayer/source-files'
    import highlight from 'rehype-highlight'

    export default makeSource({
      // ...
      mdx: { rehypePlugins: [highlight] },
    })
    ```

  </OptionDescription>
  <OptionTitle>
    ### `fieldOptions`

  </OptionTitle>
  <OptionDescription>
    Provides the ability to manipulate how fields are written when parsing the content source.

    **Options:**

    - `bodyFieldName` (default: `body`): Name of the field containing the body/content extracted when the body type is `markdown` or `mdx`.
    - `typeFieldName` (default: `type`): Name of the field containing the name of the document type (or nested document type).

    **Example:**

    ```js
    export default makeSource({
      fieldOptions: {
        bodyFieldName: 'content',
        typeFieldName: '__typename',
      },
    })
    ```

  </OptionDescription>
  <OptionTitle>
    ### `date`

  </OptionTitle>
  <OptionDescription>
    Specify date options. Currently only supports:

    - `timezone`: Specify the timezone when parsing dates. Based on [@marsnusw/date-fns-tz](https://github.com/marnusw/date-fns-tz#zonedtimetoutc).

  </OptionDescription>
</OptionsTable>