Creating Documentation Content

Documentation provides usage guidelines and code samples about a component, event, or interface.

In the Component Library, the Documentation tab renders content from your .auradoc file. For an example, see the lightning:avatar Documentation tab at https://developer.salesforce.com/docs/component-library/bundle/lightning:avatar/documentation. Each component, event, or interface element can have one .auradoc file.

Writing the Documentation

Provide your content in HTML markup. Add usage guidelines and code samples to help developers use your component, event, or interface easily.

To provide documentation, click DOCUMENTATION in the component sidebar of the Developer Console, which creates a .auradoc file for your component.

A .auradoc file contains these tags.

Basic Formatting

We recommend that you use only the tags listed here and in the following sections. The Component Library strips out or escapes unexpected tags and attributes for security reasons.

Make sure to include closing tags.

Heading

Only <h4> headings are supported for headings.

<h4>Usage Considerations</h4>

Paragraph

<p>Some cool paragraph about a component</p>

Code Formatting

<p>Here’s a paragraph on the <code>c:myComponentName</code> component.</p>

Code Blocks

Create a code block using the <pre> tag and an embedded <code> tag for code highlighting. Code markup must be escaped. For example, replace < characters with <.

<pre><code class="language-markup">&lt;aura:component>
   &lt;lightning:accordion activeSectionName="B">
     &lt;lightning:accordionSection name="A" label="Accordion Title A">This is the content area for section A&lt;/lightning:accordionSection>
     &lt;lightning:accordionSection name="B" label="Accordion Title B">This is the content area for section B&lt;/lightning:accordionSection>
   &lt;/lightning:accordion>
&lt;/aura:component></code></pre>

To enable code highlighting in the Component Library, add the class attribute to the <code> tag. Code samples with Aura markup use the class language-markup. JavaScript controllers use language-js, and CSS use language-css.

Links

The Component Library supports links to other component reference pages, external links, and cross-tab linking from the component reference to the Lightning Web Components Developer Guide.

Anchor links are currently not supported.

Create a link to another component reference page

<a href="/docs/component-library/bundle/lightning:input/documentation"> lightning:input</a>

Create an external link

<p>
    For more information, see the
    <a href=""https://developer.salesforce.com/docs/atlas.en-us.api_console.meta/api_console/"
    target="_blank">Console Developer Guide</a>.
</p>

Create a link to a topic in the Lightning Web Components Developer Guide

<a href="/docs/component-library/documentation/lwc/lwc.use_navigate">
  Navigate to Pages
</a>

Lists

Lists present related items and can be bulleted or numbered.

Create a bulleted list

<p><code>lightning:listView</code> supports the following features.</p>
<ul>
  <li>Inline editing</li>
  <li>Mass inline editing for single record types</li>
  <li>Resizing and sorting of columns</li>
  <li>Search</li>
  <li>Text wrapping</li>
  <li>Loading of additional rows</li>
</ul>

Create a numbered list

<p>The toolbar provides menus and buttons that are ordered within the following categories.</p>
<ol>
  <li>
    <code>FORMAT_FONT</code>: Font family and size menus. The font menu provides the following font
    selection: Arial, Courier, Garamond, Salesforce Sans, Tahoma, Times New Roman, and Verdana. The
    font selection defaults to Salesforce Sans with a size of 12px. Supported font sizes are: 8, 9,
    10, 11, 12, 14, 16, 18, 20, 22, 24, 26, 28, 36, 48, and 72. When you copy and paste text in the
    editor, the font is preserved only if the font is available in the font menu.
  </li>
  <li><code>FORMAT_TEXT</code>: Bold, Italic, Underline, and Strikethrough buttons.</li>
  <li><code>FORMAT_BODY</code>: Bulleted List, Numbered List, Indent, and Outdent buttons.</li>
  <li>
    <code>ALIGN_TEXT</code>: Left Align Text, Center Align Text, and Right Align Text buttons.
  </li>
  <li>
    <code>INSERT_CONTENT</code>: Image button. The Image button displays if you include the
    <code>lighting:insertImageButton</code> component in <code>lightning:inputRichText</code>.
  </li>
  <li>
    <code>REMOVE_FORMATTING</code>: Remove formatting button, which stands alone at the end of the
    toolbar.
  </li>
</ol>

Tables

Tables are useful for presenting a list of items with several accompanying descriptions. Nesting a bulleted list in a table is currently not supported.

<table>
  <tr>
    <th>Property</th>
    <th>Type</th>
    <th>Description</th>
  </tr>
  <tr>
    <td>label</td>
    <td>string</td>
    <td>The text that displays next to a radio button.</td>
  </tr>
  <tr>
    <td>value</td>
    <td>string</td>
    <td>The string that's used to identify which radio button is selected.</td>
  </tr>
</table>