Skip to content

Latest commit

 

History

History
173 lines (124 loc) · 4.47 KB

markdown-example.mdx

File metadata and controls

173 lines (124 loc) · 4.47 KB

export const metadata = { title: "Markdown example", description: "An example page to see how to author content in markdown", files: ["path-to-source-file.tsx"], dependencies: [ { name: "@significa/foundations", href: "https://significa.co", }, ], preview: "preview-slug", };

Content authoring

Here's a guide on how to write markdown content using GitHub Flavored Markdown (GFM).

Heading 1

Heading 2

Heading 3

Heading 4

Regular paragraph text with bold text, italic text, and bold italic text.

You can also use strikethrough and underlined text.

Here's a link to GitHub and another link with a title.

Lists

Unordered list:

  • First item
  • Second item
    • Nested item
    • Another nested item
  • Third item

Ordered list:

  1. First item
  2. Second item
    1. Nested item
    2. Another nested item
  3. Third item

Blockquotes

This is a blockquote It can span multiple lines

And can contain formatted text and links

Images

Here's an example image with alt text:

A beautiful landscape

Mixed content example

Here's a paragraph that combines multiple elements: This is a regular paragraph with a link, some bold text, and strikethrough. You can also add inline code or emphasize certain words.

Note: Blockquotes can contain lists too:

  • Item one
  • Item two

Tables

Prop Type Default Description
variant string primary The visual style variant of the button - can be 'primary', 'secondary', 'outline', 'ghost'
size string md The size of the button - can be 'sm', 'md', 'lg'
disabled boolean - Whether the button is disabled and cannot be interacted with
loading boolean - Whether to show a loading spinner inside the button
asChild boolean - Whether to merge props onto a child element instead of creating a button element

Code

A bit of text with inline code.

Another text with javascript inline const a = 1;{:js} and console.log('hello');{:js}.

Code blocks

You can:

  • Choose language
  • Highlight lines
  • Highlight words
  • Show line numbers (and choose starting line with showLineNumbers{100})
  • Add a title
  • Add a caption
module.exports = {
  theme: {
    extend: {
      keyframes: {
        marquee: {
          "0%": { transform: "translateX(0%)" },
          "100%": { transform: "translateX(-100%)" },
        },
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
};

The name of the function is getStringLength{:.entity.name.function}.

See rehype-pretty for more information.

Some components

PropsTable

Renders a table of props for a component.

<PropsTable definition={{ variant: { type: ["neutral", "success", "error", "warning", "info"], // can be just a string default: "neutral", // optional description: "The visual style variant of the badge", // optional }, }} />

Button

A simple button component.

Click me

Preview

Renders a preview file. Will include a button to see the source code.

SourceCode

Renders a code block with the source code of any file. Can be expandable:

  • expandable - if true, the code block will be expandable
  • withTitle - if true, the filename will be displayed as the title of the code block

FileTree