Markdown

The Markdown component renders Markdown in the terminal with headings, lists, code blocks, tables, and more. Use props to style each element.

Basic Usage

<template>
  <Markdown content="# Hello World\n\nThis is **bold** and _italic_ text." />
</template>

<script setup>
import { Markdown } from 'vuetty';
</script>

Props

Markdown colors are theme-aware. They default to theme.components.markdown.* and fall back to the legacy defaults below when the theme doesn’t define them.

Name	Type	Default	Description
content	string	''	Markdown content to render
h1Color	string	theme	Color for H1 headings
h2Color	string	theme	Color for H2 headings
h3Color	string	theme	Color for H3 headings
h4Color	string	theme	Color for H4 headings
h5Color	string	theme	Color for H5 headings
h6Color	string	theme	Color for H6 headings
codeColor	string	theme	Code text color
codeBg	string	theme	Code background color
linkColor	string	theme	Link color
emphasisColor	string	theme	Emphasis (italic) color
strongColor	string	theme	Strong (bold) color
blockquoteColor	string	theme	Blockquote text color
blockquoteBorderColor	string	theme	Blockquote border color
listBulletColor	string	theme	List bullet color
listNumberColor	string	theme	List number color
hrColor	string	theme	Horizontal rule color
hrChar	string	'─'	Horizontal rule character
hrLength	number	60	Horizontal rule length
tableHeaderColor	string	theme	Table header color
tableBorderColor	string	theme	Table border color
color	string	-	Base text color
bg	string	-	Background color
bold	boolean	false	Bold text
italic	boolean	false	Italic text
dim	boolean	false	Dimmed text

Layout Props (Box Props)

Name	Type	Default	Description
flex	number | string	null	Flex shorthand when inside a flex container
flexGrow	number	null	Flex grow factor
flexShrink	number	null	Flex shrink factor
flexBasis	number | string	null	Flex basis
alignSelf	string	null	Self alignment: 'auto', 'flex-start', 'flex-end', 'center', 'stretch', 'baseline'
width	number | string	null	Width (chars or %)
height	number | string	null	Height (rows)
minWidth	number	null	Minimum width
maxWidth	number	null	Maximum width
minHeight	number	null	Minimum height
maxHeight	number	null	Maximum height
padding	number	0	Padding
paddingLeft	number	null	Left padding
paddingRight	number	null	Right padding
paddingTop	number	null	Top padding
paddingBottom	number	null	Bottom padding
margin	number	null	Margin
marginLeft	number	null	Left margin
marginRight	number	null	Right margin
marginTop	number	null	Top margin
marginBottom	number	null	Bottom margin

Basic Markdown Elements

Headings

<template>
  <Markdown content="# Heading 1\n## Heading 2\n### Heading 3" />
</template>

<script setup>
import { Markdown } from 'vuetty';
</script>

Paragraphs and Text Styling

<template>
  <Markdown content="This is a paragraph with **bold**, _italic_, and `code` text." />
</template>

<script setup>
import { Markdown } from 'vuetty';
</script>

Lists

<template>
  <Markdown content="- Item 1\n- Item 2\n- Item 3\n\n1. First\n2. Second\n3. Third" />
</template>

<script setup>
import { Markdown } from 'vuetty';
</script>

Code Blocks

<template>
  <Markdown content="```javascript\nconst x = 10;\nconsole.log(x);\n```" />
</template>

<script setup>
import { Markdown } from 'vuetty';
</script>

Tables

<template>
  <Markdown content="| Name | Age |\n|------|-----|\n| John | 30 |\n| Jane | 25 |" />
</template>

<script setup>
import { Markdown } from 'vuetty';
</script>

Blockquotes

<template>
  <Markdown content="> This is a blockquote.\n> It can span multiple lines." />
</template>

<script setup>
import { Markdown } from 'vuetty';
</script>

Horizontal Rules

<template>
  <Markdown content="Content above\n\n---\n\nContent below" />
</template>

<script setup>
import { Markdown } from 'vuetty';
</script>

Custom Styling

Heading Colors

<template>
  <Markdown
    content="# Red Heading\n## Green Subheading"
    h1Color="red"
    h2Color="green"
  />
</template>

<script setup>
import { Markdown } from 'vuetty';
</script>

Code Block Styling

<template>
  <Markdown
    content="```\ncode here\n```"
    codeColor="magenta"
    codeBg="black"
  />
</template>

<script setup>
import { Markdown } from 'vuetty';
</script>

Link Styling

<template>
  <Markdown
    content="[Visit Vuetty](https://vuetty.js.org)"
    linkColor="cyan"
  />
</template>

<script setup>
import { Markdown } from 'vuetty';
</script>

List Styling

<template>
  <Markdown
    content="- Item 1\n- Item 2"
    listBulletColor="yellow"
  />
</template>

<script setup>
import { Markdown } from 'vuetty';
</script>

Width and Layout

Fixed Width

<template>
  <Markdown
    content="# Title\n\nContent here"
    :width="50"
  />
</template>

<script setup>
import { Markdown } from 'vuetty';
</script>

Auto Width

<template>
  <Markdown
    content="# Title\n\nContent here"
  />
</template>

<script setup>
import { Markdown } from 'vuetty';
</script>

With Padding

<template>
  <Markdown
    content="# Title\n\nContent here"
    :padding="2"
  />
</template>

<script setup>
import { Markdown } from 'vuetty';
</script>

Usage with Other Components

With Box

<template>
  <Box :padding="1" color="cyan">
    <Markdown content="# Documentation\n\nThis is markdown inside a box." />
  </Box>
</template>

<script setup>
import { Box, Markdown } from 'vuetty';
</script>

With Row and Col

<template>
  <Row gap="2">
    <Col flex="1">
      <Markdown content="# Left Column\n\nContent here" />
    </Col>
    <Col flex="1">
      <Markdown content="# Right Column\n\nMore content" />
    </Col>
  </Row>
</template>

<script setup>
import { Row, Col, Markdown } from 'vuetty';
</script>

Common Patterns

Documentation Page

<template>
  <Markdown :padding="1">
    # Getting Started\n\n## Installation\n\n```bash\nnpm install vuetty\n```\n\n## Usage\n\nImport components and start building!\n  </Markdown>
</template>

<script setup>
import { Markdown } from 'vuetty';
</script>

README Display

<template>
  <Box :padding="1" color="white">
    <Markdown
      content="# Project Title\n\nA brief description of your project.\n\n## Features\n\n- Feature 1\n- Feature 2\n- Feature 3\n\n## Installation\n\n```bash\nnpm install my-project\n```"
    />
  </Box>
</template>

<script setup>
import { Box, Markdown } from 'vuetty';
</script>

Help Section

<template>
  <Markdown
    content="# Help\n\n## Commands\n\n- `start`: Start the server\n- `build`: Build for production\n- `test`: Run tests\n\n## Options\n\n| Option | Description |\n|--------|-------------|\n| --port | Server port |\n| --env | Environment |"
    :padding="1"
  />
</template>

<script setup>
import { Markdown } from 'vuetty';
</script>