SFDocs Markdown Preview

ℹ️ For the best experience of SFDocs Markdown Preview extension , we suggest you to disable the builtin Markdown Language Features extension.

SFDocs Markdown Preview provides Micromark-compliant Markdown previews. It features most of the out-of-the-box Markdown preview features like:

• Dynamic previews
• Editor and preview synchronization
• Custom CSS

Steps to preview with local changes

• Run npm install command to install the dependencies
• Run npm run compile to compile your changes
• fn + F5 to test locally . It will open the vs code in local mode and open the markdown file you want to test in a new window.
• Run npm run package to generate the latest .vsix file

Always use npm package manager to generate the .vsix file for the extension.

For debugging

• For debugging the css you can use the Webview Developer tools

Shortcuts

Markdown Support

The extension supports all CommonMark syntax and the following additional plugins:

Content Reuse

::include{src="./../shared/test_include.md"}

Renders to

Pull code samples from multiple sources

File in the same repository

```sfdocs-code {"lang":"java", "title": "From the same repo", "src": "./../../../samples/quip-java/test.java" }

```

File from a public Gist on GitHub

```sfdocs-code {"lang":"markdown", "title": "From a GitHub Gist file", "src": "https://gist.githubusercontent.com/sejal-salesforce/6dfe506915cb0f6b2295d3fd6f8c9fe1/raw" }

```

File from a public GitHub repository

```sfdocs-code {"lang":"javascript", "title": "From lwc-recipes GitHub Repository", "src": "https://raw.githubusercontent.com/trailheadapps/lwc-recipes/master/force-app/main/default/lwc/clock/clock.js" }

```

Callouts

Use callouts in your content.

:::tip
An example of a tip
:::

:::warning
An example of a warning
:::


:::note
An example of a note
:::

Videos

Add YouTube videos to your content.

::video{src="https://youtube.com/embed/di6iwHhrH6s" title="Video from Youtube" type="youtube" }