Getting Started

  • Introduction
  • Installation

Components

  • Button
  • Switch
  • Avatar
  • Callout
  • Avatar Group
  • Card
  • Divider
  • Link
  • Page
  • PageBody
  • Page Marquee
  • PageSection
  • Toasts

Typography

  • Introduction
  • Fields
  • Code Preview
Mockline v0.19.0

Introduction

A comprehensive guide to using typography styles and Markdown formatting in Mockline.

Overview

Mockline provides a rich set of typography styles that automatically enhance your Markdown content. These styles ensure consistent and beautiful text formatting across your documentation and content pages.

Basic Text Formatting

Headings

Headings help structure your content hierarchically:

# Heading 1
## Heading 2
### Heading 3
#### Heading 4

Renders as:

Heading 1

Heading 2

Heading 3

Heading 4

Text Emphasis

Various ways to emphasize your text:

Regular paragraph text.

**Bold text** for strong emphasis.

*Italic text* for subtle emphasis.

~~Strikethrough~~ for outdated content.

`inline code` for technical terms.

Renders as:

Regular paragraph text.

Bold text for strong emphasis.

Italic text for subtle emphasis.

Strikethrough for outdated content.

inline code for technical terms.

Links

Create internal and external links:

[External link](https://mockline.dev)

[Internal link](/getting-started)

Link with [reference][ref] style
[ref]: https://mockline.dev

Renders as:

External link

Internal link

Link with [reference]ref style ref: https://mockline.dev

Lists

Unordered Lists

- First item
- Second item
  - Nested item
  - Another nested item
- Third item

Renders as:

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

Ordered Lists

1. First step
2. Second step
   1. Sub-step one
   2. Sub-step two
3. Third step

Renders as:

  1. First step
  2. Second step
    1. Sub-step one
    2. Sub-step two
  3. Third step

Code

Inline Code

Use backticks for inline code: `const example = true`

Renders as: const example = true

Code Blocks

For multi-line code, use triple backticks with optional language specification:

```js
const greeting = 'Hello'
const target = 'World'
console.log(`${greeting}, ${target}!`)
```

Renders as:

const greeting = 'Hello'
const target = 'World'
console.log(`${greeting}, ${target}!`)

Quotes

Use blockquotes to highlight important information:

> This is a blockquote
> It can span multiple lines
>
> And contain multiple paragraphs

Renders as:

This is a blockquote It can span multiple lines

And contain multiple paragraphs

Best Practices

  1. Document Structure:
    • Start each page with a single H1 heading
    • Follow a logical heading hierarchy
    • Keep content well-organized with appropriate sections
  2. Text Formatting:
    • Use emphasis sparingly to maintain impact
    • Choose appropriate heading levels for content hierarchy
    • Keep paragraphs concise and focused
  3. Links and References:
    • Use descriptive link text
    • Prefer relative paths for internal links
    • Add appropriate attributes for external links
  4. Code Formatting:
    • Use inline code for short references
    • Include language hints in code blocks
    • Format code consistently
  5. Content Organization:
    • Group related content under appropriate headings
    • Use lists for better readability
    • Include examples where helpful

Tips

  1. Preview your content while writing to ensure proper formatting
  2. Use frontmatter to add metadata to your pages
  3. Keep your markdown files organized in a logical structure
  4. Maintain consistent formatting across your documentation
  5. Use appropriate heading levels to create a clear content hierarchy
Installation
Learn how to install and configure Mockline in your Nuxt application.
Fields
Components for displaying and grouping properties, parameters, and field documentation.