Hello, World!

Markdoc is a Markdown-based syntax and toolchain for creating custom documentation sites. Stripe created Markdoc to power our public docs .

How is Markdoc different?

Markdoc uses a fully declarative approach to composition and flow control, where other solutions… Read more .

Next steps

• Install Markdoc
• Explore the syntax

Syntax

Bold

Italic

Official guide

Lists

• Item A
• Item B
  • Item a
  • Item b
  • Item c
• Item C
  1. Item 1
  2. Item 2
  3. Item 3

Quotes

Inline code

import {LitElement, html, customElement, property} from 'lit-element';

const style = /* css */`
  .foo {
    display: block;
    border: 1px solid black;
    padding: 16px;
    max-width: 800px;
    margin: 0 auto;
  }
`;

@customElement('my-element')
class MyElement extends LitElement {

  // Declare observed properties
  @property()
  adjective = 'awesome';

  // Define the element's template
  render() {
    return html`
      <!-- text binding -->
      <div>${this.prop1}</div>

      <!-- attribute binding -->
      <div id="${this.prop2}">attribute binding</div>

      <!-- boolean attribute binding -->
      <div>
        boolean attribute binding
        <input type="text" ?disabled="${this.prop3}"/>
      </div>

      <!-- property binding -->
      <div>
        property binding
        <input type="text" .value="${this.prop4}"/>
      </div>

      <!-- event handler binding -->
      <div>event handler binding
        <button @click="${this.clickHandler}">click</button>
      </div>
    `;
  }
}