### UML Flow Chart Example

Source: https://github.com/facelessuser/markdownpreview/blob/master/examples/test.md

This example demonstrates the rendering of a UML flow chart using the `flow` language. It includes various elements like start, end, operations, subroutines, conditions, and input/output, with links.

```flow
st=>start: Start:>http://www.google.com[blank]
e=>end:>http://www.google.com
op1=>operation: My Operation
sub1=>subroutine: My Subroutine
cond=>condition: Yes
or No?:>http://www.google.com
io=>inputoutput: catch something...

st->op1->cond
cond(yes)->io->e
cond(no)->sub1(right)->op1
```

```flow
st=>start: Start:>http://www.google.com[blank]
e=>end:>http://www.google.com
op1=>operation: My Operation
sub1=>subroutine: My Subroutine
cond=>condition: Yes
or No?:>http://www.google.com
io=>inputoutput: catch something...

st->op1->cond
cond(yes)->io->e
cond(no)->sub1(right)->op1
```

--------------------------------

### Install Markdown Preview via Package Control

Source: https://context7.com/facelessuser/markdownpreview/llms.txt

Follow these steps to install the Markdown Preview plugin using Sublime Text's Package Control.

```text
1. Install Package Control if not already installed.
2. Open Command Palette: Cmd+Shift+P (macOS) / Ctrl+Shift+P (Windows/Linux)
3. Select: Package Control: Install Package
4. Search for and select: MarkdownPreview
5. Restart Sublime Text
```

--------------------------------

### Progress Bar Examples

Source: https://github.com/facelessuser/markdownpreview/blob/master/examples/test.md

These examples showcase the usage of progress bars with different configurations, including animation, custom labels, and inline styling. The `attr_list` extension is used for inline attributes.

```markdown
| Test               | Result                                        |
|--------------------|-----------------------------------------------|
|Animated: 0%        |[=0% "0%"]{: .candystripe-animate}             |
|Animated: 5%        |[=5% "5%"]{: .candystripe-animate}             |
|Animated: 25%       |[=25% "25%"]{: .candystripe-animate}           |
|Animated: 45%       |[=45% "45%"]{: .candystripe-animate}           |
|Animated: 65%       |[=65% "65%"]{: .candystripe-animate}           |
|Animated: 85%       |[=85% "85%"]{: .candystripe-animate}           |
|Animated: 100%      |[=100% "100%"]{: .candystripe-animate}         |
|Division Percentage |[= 212.2/537 "212.2/537 Testing division"]     |
|No Label            |[= 50%]                                        |
|Inline              |Before[= 50% "I'm a block!"]After              |
|Gloss and Animated  |[= 50% "Gloss"]{: .candystripe-animate .gloss} |
```

```markdown
| Test               | Result                                        |
|--------------------|-----------------------------------------------|
|Animated: 0%        |[=0% "0%"]{: .candystripe-animate}             |
|Animated: 5%        |[=5% "5%"]{: .candystripe-animate}             |
|Animated: 25%       |[=25% "25%"]{: .candystripe-animate}           |
|Animated: 45%       |[=45% "45%"]{: .candystripe-animate}           |
|Animated: 65%       |[=65% "65%"]{: .candystripe-animate}           |
|Animated: 85%       |[=85% "85%"]{: .candystripe-animate}           |
|Animated: 100%      |[=100% "100%"]{: .candystripe-animate}         |
|Division Percentage |[= 212.2/537 "212.2/537 Testing division"]     |
|No Label            |[= 50%]                                        |
|Inline              |Before[= 50% "I'm a block!"]After              |
|Gloss and Animated  |[= 50% "Gloss"]{: .candystripe-animate .gloss} |
```

--------------------------------

### YAML Frontmatter Example

Source: https://github.com/facelessuser/markdownpreview/blob/master/docs/src/markdown/usage.md

Example of YAML frontmatter with references, destination, title, author, and settings overrides for markdown extensions.

```yaml
---
    # Builtin values
    references:
        - references.md
        - abbreviations.md
        - footnotes.md

    destination: destination.html

    # Meta Data
    title: Test Page
    author:
        - John Doe
        - Jane Doe

    # Settings overrides
    settings:
        markdown_extensions:
          - markdown.extensions.footnotes
          - markdown.extensions.attr_list
          - markdown.extensions.def_list
          - markdown.extensions.tables
          - markdown.extensions.abbr
          - markdown.extensions.toc
          - markdown.extensions.smarty
          - markdown.extensions.meta
          - markdown.extensions.wikilinks
          - markdown.extensions.admonition
          - markdown.extensions.md_in_html
          - pymdownx.highlight:
              pygments_style: github
          - pymdownx.progressbar
          - pymdownx.github
          - pymdownx.caret:
              superscript: false
---
```

--------------------------------

### Inline and Display Math Examples

Source: https://github.com/facelessuser/markdownpreview/blob/master/examples/test.md

Demonstrates inline and display math rendering using LaTeX syntax. Inline math is enclosed in single dollar signs or \(...\), while display math uses double dollar signs or \[...\] or \begin{align}...
\end{align}.

```latex
$p(x|y) = \frac{p(y|x)p(x)}{p(y)}$, \(p(x|y) = \frac{p(y|x)p(x)}{p(y)}\).
```

```latex
$$E(\mathbf{v}, \mathbf{h}) = -\sum_{i,j}w_{ij}v_i h_j - \sum_i b_i v_i - \sum_j c_j h_j$$
```

```latex
\[3 < 4\]
```

```latex
\begin{align}
    p(v_i=1|\mathbf{h}) & = \sigma\left(\sum_j w_{ij}h_j + b_i\right) \\
    p(h_j=1|\mathbf{v}) & = \sigma\left(\sum_i w_{ij}v_i + c_j\right) 
\end{align}
```

--------------------------------

### Example Markdown with Various Renderings

Source: https://github.com/facelessuser/markdownpreview/wiki/GitLab-Online-Compiler

Demonstrates various markdown features including headers, blockquotes, inline code, math rendering, Python code blocks, and Mermaid diagrams.

```markdown
Title
===
Example text.

## Subtitle

> **Note**: 
> Some notes here.

We have a `python` script to calculate $`e = m	ext{c}^2`$.

```math
e = m	ext{c}^2
```

```python
if __name__ == '__main__':
  main()
```

```mermaid
graph TD;
  A-->B;
  A-->C;
  B-->D;
  C-->D;
```
```

--------------------------------

### Mermaid Sequence Diagram Example

Source: https://github.com/facelessuser/markdownpreview/blob/master/examples/test.md

Creates a sequence diagram using Mermaid syntax. This allows for more complex interactions and notes. Use the 'mermaid' language identifier.

```mermaid
sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!
```

--------------------------------

### Enable Third-Party Python Markdown Extension

Source: https://context7.com/facelessuser/markdownpreview/llms.txt

Install a third-party extension into Sublime Text's Packages folder and reference it in `markdown_extensions`.

```js
// MarkdownPreview.sublime-settings — User
{
    "markdown_extensions": [
        "markdown.extensions.tables",
        "markdown.extensions.footnotes",
        "pymdownx.highlight",
        "markdown_captions.markdown_captions"  // third-party extension
    ]
}
```

--------------------------------

### Markdown Task List

Source: https://github.com/facelessuser/markdownpreview/blob/master/examples/test.md

Provides examples of task lists in Markdown, showing checked and unchecked items, including nested structures.

```markdown
Task List

- [X] item 1
    * [X] item A
    * [ ] item B
        more text
        + [x] item a
        + [ ] item b
        + [x] item c
    * [X] item C
- [ ] item 2
- [ ] item 3
```

--------------------------------

### Configure Python Markdown Extension Options

Source: https://github.com/facelessuser/markdownpreview/blob/master/docs/src/markdown/usage.md

Configure specific options for a Python Markdown extension by making its entry a dictionary. This example enables the permalink feature for the Table of Contents (toc) extension.

```js
    "markdown_extensions": [
        {
            "markdown.extensions.toc": {
                "permalink": true
            }
        }
    ]
```

--------------------------------

### UML Sequence Diagram Example

Source: https://github.com/facelessuser/markdownpreview/blob/master/examples/test.md

Defines a simple UML sequence diagram with participants and message flows. Use the 'sequence' language identifier.

```sequence
Title: Here is a title
A->B: Normal line
B-->C: Dashed line
C->>D: Open arrow
D-->>A: Dashed open arrow
```

--------------------------------

### Javascript Code Snippet

Source: https://github.com/facelessuser/markdownpreview/blob/master/samples/sample.md

An example of asynchronous function calls in Javascript.

```javascript
var config = {
    duration: 5,
    comment: 'WTF'
}
// callbacks beauty un action
async_call('/path/to/api', function(json) {
    another_call(json, function(result2) {
        another_another_call(result2, function(result3) {
            another_another_another_call(result3, function(result4) {
                alert('And if all went well, i got my result :)');
            });
        });
    });
})
```

--------------------------------

### Configure Build System for Markdown Preview

Source: https://context7.com/facelessuser/markdownpreview/llms.txt

Set up the build system (Ctrl+B/Cmd+B) to export Markdown to HTML, choosing the output destination like browser, clipboard, or saving to a file.

```json
// MarkdownPreview.sublime-settings — User
{
    // Parser used for the build command
    "parser": "markdown",

    // Build output target:
    // "build"     → saves HTML next to source file (default)
    // "browser"   → opens in browser
    // "clipboard" → copies HTML to clipboard
    // "sublime"   → opens HTML in a new Sublime tab
    // "save"      → prompts "Save As" if file not on disk
    "build_action": "browser",

    // Hide the build output panel
    "show_panel_on_build": false
}
```

--------------------------------

### Configure Browser for Preview

Source: https://github.com/facelessuser/markdownpreview/blob/master/docs/src/markdown/usage.md

Set the default or a specific browser to open HTML previews. Use 'default' for the system default or provide a full path to an executable.

```json
    /*
        Sets the default opener for HTML files

        default - Use the system default HTML viewer
        other - Set a full path to any executable. ex: /Applications/Google Chrome Canary.app or /Applications/Firefox.app
    */
    "browser": "default",
```

--------------------------------

### Configure Build Action

Source: https://github.com/facelessuser/markdownpreview/blob/master/docs/src/markdown/usage.md

Set the build action for the current file. Options include 'build', 'browser', 'clipboard', 'sublime', and 'save'.

```json
    /*
        By default, Markdown Preview builds the HTML in the source directory.
        It expects the file to exist on disk.  It pops up the build output panel etc.

        If you wish to override this behavior, you can change "build_action"

        build - The default build behavior.
        browser - Preview the file in your browser.
        clipboard - Copy the HTML output to the clipboard.
        sublime - Export the HTML to a Sublime tab.
        save - Run the normal save command that outputs to the source directory.
            It will also prompt for "save as" if the file does not exit on disk.

        All the build options use the default parser defined above in "parser"
    */
    "build_action": "build",
```

--------------------------------

### Configure Keybindings for Markdown Preview

Source: https://context7.com/facelessuser/markdownpreview/llms.txt

Customize keyboard shortcuts to quickly preview Markdown files with specific parsers or to select a parser before previewing.

```json
// Keybinding: bind a shortcut to preview with a specific parser and target
// Add to Preferences → Key Bindings → User
[
    // Preview with Python Markdown parser in browser
    { "keys": ["alt+m"], "command": "markdown_preview", "args": {"target": "browser", "parser": "markdown"} },

    // Preview with GitHub API parser in browser
    { "keys": ["alt+g"], "command": "markdown_preview", "args": {"target": "browser", "parser": "github"} },

    // Show parser selection quick panel first, then open in browser
    { "keys": ["alt+p"], "command": "markdown_preview_select", "args": {"target": "browser"} }
]
```

--------------------------------

### Configure File Path Conversions

Source: https://github.com/facelessuser/markdownpreview/blob/master/docs/src/markdown/usage.md

Determine how file paths are handled in previews. Options are 'absolute', 'relative', or 'none'.

```json
    /*
        Sets how file paths are handled.
        Setting is a string value: (absolute | relative | none)
            absolute: converts relative local paths to absolute
            relative: converts relative local paths to a path relative to the
                        HTML output
            none: does nothing
    */
    "file_path_conversions": "absolute",
```

--------------------------------

### Indented Code Block Example

Source: https://github.com/facelessuser/markdownpreview/blob/master/samples/sample.md

Any indented block is considered a code block. If `enable_highlight` is `true`, syntax highlighting will be included for the builtin parser.

```html
<script>
    document.location = 'http://lmgtfy.com/?q=markdown+cheat+sheet';
</script>
```

--------------------------------

### Configure KaTeX JavaScript and CSS

Source: https://github.com/facelessuser/markdownpreview/blob/master/docs/src/markdown/extras.md

Include KaTeX library and configuration script for JavaScript, along with KaTeX CSS for rendering math. The default CSS is also included.

```javascript
"js": {
    "markdown": [
        "https://cdn.jsdelivr.net/npm/katex@0.10.0-alpha/dist/katex.min.js",
        "res://MarkdownPreview/js/katex_config.js"
    ]
},
```

```javascript
"css": {
    "markdown": [
        "default",                                                            
        "https://cdn.jsdelivr.net/npm/katex@0.10.0-alpha/dist/katex.min.css", 
        "res://MarkdownPreview/css/katex_eqnum.css"                           
    ]
},
```

--------------------------------

### Configure KaTeX Support

Source: https://context7.com/facelessuser/markdownpreview/llms.txt

Enable KaTeX for lighter-weight LaTeX math rendering. Include the KaTeX library, a custom configuration, and KaTeX CSS. Use 'pymdownx.arithmatex' with 'generic: true'.

```json
{
    "js": {
        "markdown": [
            "https://cdn.jsdelivr.net/npm/katex@0.10.0-alpha/dist/katex.min.js",
            "res://MarkdownPreview/js/katex_config.js"
        ]
    },
    "css": {
        "markdown": [
            "default",
            "https://cdn.jsdelivr.net/npm/katex@0.10.0-alpha/dist/katex.min.css",
            // Optional: equation numbering CSS
            "res://MarkdownPreview/css/katex_eqnum.css"
        ]
    },
    "markdown_extensions": [
        {
            "pymdownx.arithmatex": {
                "generic": true
            }
        }
    ]
}
```

--------------------------------

### Configure Multiple Pygments Options

Source: https://github.com/facelessuser/markdownpreview/blob/master/docs/src/markdown/usage.md

Apply multiple Pygments highlighting configurations simultaneously.

```json
"markdown_extensions": [
        "pymdownx.highlight": {
            "linenums": true,
            "pygments_style": "emacs"
        }
    ]
```

--------------------------------

### Bind Shortcut to Select Parser and Target

Source: https://github.com/facelessuser/markdownpreview/blob/master/docs/src/markdown/usage.md

Create a keyboard shortcut to open a quick panel for selecting enabled parsers for a given target.

```js
{ "keys": ["alt+m"], "command": "markdown_preview_select", "args": {"target": "browser"} }
```

--------------------------------

### Configure Theme for Light/Dark Mode

Source: https://github.com/facelessuser/markdownpreview/blob/master/docs/src/markdown/usage.md

Set the preferred theme for light/dark mode. Options are 'dark', 'light', and 'auto' for system-based selection.

```json
    /*
        Preference for dark/light mode.

        Available options are: "dark", "light", and "auto".
    */
    "theme": "auto",
```

--------------------------------

### Configure UML Diagram Support (js-sequence-diagrams & flowchart.js)

Source: https://context7.com/facelessuser/markdownpreview/llms.txt

Enable rendering of 'flow' and 'sequence' fenced code blocks as UML diagrams by including necessary JavaScript libraries.

```json
{
    "js": {
        "markdown": [
            "https://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.7/raphael.min.js",
            "https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js",
            "https://cdnjs.cloudflare.com/ajax/libs/js-sequence-diagrams/1.0.6/sequence-diagram-min.js",
            "https://cdnjs.cloudflare.com/ajax/libs/flowchart/1.6.5/flowchart.min.js",
            "res://MarkdownPreview/js/uml.js"
        ]
    }
}
```

```markdown
<!-- In your Markdown file: -->

```flow
st=>start: Start
op=>operation: Do something
e=>end: End
st->op->e
```

```sequence
Alice->Bob: Hello Bob!
Bob-->Alice: Hi Alice!
```
```

--------------------------------

### Configure pymdownx.arithmatex for KaTeX

Source: https://github.com/facelessuser/markdownpreview/blob/master/docs/src/markdown/extras.md

Enable generic mode in pymdownx.arithmatex to work with KaTeX's generalized configuration. This allows for flexible math notation rendering.

```python
"markdown_extensions": [
    {
        "pymdownx.arithmatex": {
            "generic": true,
        },
    }
]
```

--------------------------------

### Configure MathJax Support

Source: https://context7.com/facelessuser/markdownpreview/llms.txt

Enable MathJax rendering for LaTeX math in Markdown by including the MathJax library and a custom configuration file. Use 'pymdownx.arithmatex' with 'generic: true' to preserve math.

```json
{
    "js": {
        "markdown": [
            "https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js",
            "res://MarkdownPreview/js/math_config.js"
        ]
    },
    "markdown_extensions": [
        {
            "pymdownx.arithmatex": {
                "generic": true
            }
        }
    ]
}
```

--------------------------------

### Configure Pygments Style

Source: https://github.com/facelessuser/markdownpreview/blob/master/docs/src/markdown/usage.md

Set the Pygments highlighting theme.

```json
"markdown_extensions": [
        "pymdownx.highlight": {
            "pygments_style": "emacs"
        }
    ]
```

--------------------------------

### Configure Light/Dark Theme

Source: https://context7.com/facelessuser/markdownpreview/llms.txt

Set the theme for automatic light/dark mode switching based on OS preference or pin a specific mode.

```js
// MarkdownPreview.sublime-settings — User
{
    // Options: "auto" (follow OS), "light", "dark"
    "theme": "auto"
}
```

--------------------------------

### Python Code Snippet

Source: https://github.com/facelessuser/markdownpreview/blob/master/samples/sample.md

A sample Python class demonstrating basic syntax.

```python
import random

class CardGame(object):
    """ a sample python class """
    NB_CARDS = 32
    def __init__(self, cards=5):
        self.cards = random.sample(range(self.NB_CARDS), 5)
        print 'ready to play'
```

--------------------------------

### Enable Meta Data Extension

Source: https://context7.com/facelessuser/markdownpreview/llms.txt

Include `markdown.extensions.meta` in your `markdown_extensions` setting to parse front matter and generate `<meta>` tags in the HTML output.

```markdown
Title:   My Page Title
Author:  Jane Doe
Date:    2024-01-15

# Content begins here after a blank line
```

```json
// MarkdownPreview.sublime-settings — User
{
    "markdown_extensions": [
        "markdown.extensions.meta"
        // other extensions...
    ]
}

// Output in HTML <head>:
// <title>My Page Title</title>
// <meta name="author" content="Jane Doe">
// <meta name="date" content="2024-01-15">
```

--------------------------------

### Configure GitLab Flavored Markdown

Source: https://context7.com/facelessuser/markdownpreview/llms.txt

Enable GitLab-flavored Markdown rendering by specifying 'gitlab' as an enabled parser and setting the 'gitlab_mode'. Requires a personal access token with read_api scope.

```json
{
    "enabled_parsers": ["markdown", "gitlab"],

    // "gfm" (default) renders with GitLab-flavored extensions
    "gitlab_mode": "gfm",

    // Personal access token with read_api scope — keep this secret!
    "gitlab_personal_token": "glpat-YourTokenHere",

    // Syntax highlight theme: "white" | "dark" | "solarized-dark" | "solarized-light" | "monokai"
    "gitlab_highlight_theme": "dark"
}
```

--------------------------------

### Load MathJax Support

Source: https://github.com/facelessuser/markdownpreview/blob/master/docs/src/markdown/extras.md

Include the MathJax library and the provided math config file to enable MathJax rendering. You can provide your own config file if needed.

```json
    "js": {
        "markdown": [
            "https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js",
            "res://MarkdownPreview/js/math_config.js"
        ]
    }
```

--------------------------------

### Render Dictionary Lists in Markdown

Source: https://github.com/facelessuser/markdownpreview/blob/master/examples/test.md

Shows the syntax for creating dictionary-style lists in markdown, useful for definitions or key-value pairs.

```markdown
Dictionary
:   item 1

    item 2

    item 3
```

--------------------------------

### Configure UML JavaScript Libraries

Source: https://github.com/facelessuser/markdownpreview/blob/master/docs/src/markdown/extras.md

Include necessary JavaScript libraries for rendering UML diagrams from 'sequence' and 'flow' code blocks when using the SuperFences extension.

```javascript
"js": [
    // Required libraries to transform UML notation
    "https://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.7/raphael.min.js",
    "https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js",
    "https://cdnjs.cloudflare.com/ajax/libs/js-sequence-diagrams/1.0.6/sequence-diagram-min.js",
    "https://cdnjs.cloudflare.com/ajax/libs/flowchart/1.6.5/flowchart.min.js",

    // This library applies the above libraries to the fenced code blocks `flow` and `sequence`.
    "res://MarkdownPreview/js/uml.js"
]
```

--------------------------------

### Configure Parser

Source: https://github.com/facelessuser/markdownpreview/blob/master/docs/src/markdown/usage.md

Set the parser used for converting Markdown to HTML. Options include 'default', 'markdown', 'github', and 'gitlab'.

```json
    /*
        Sets the parser used for building markdown to HTML.

        NOTE: The parser setting is not for the preview commands now.
        The previews have separate commands for each parser markdown.

        Warning for github API: if you have a ST2 linux build, Python is not built with SSL so it may not work

        default - The current default parser is python-markdown parser.
        markdown - Use the built-in python-markdown parser
        github - Use the github API to convert markdown, so you can use GitHub flavored Markdown, see https://help.github.com/articles/github-flavored-markdown/
        gitlab - Use the gitlab API to convert markdown, so you can use GitLab flavored Markdown, see https://docs.gitlab.com/ee/user/markdown.html
    */
    "parser": "markdown",
```

--------------------------------

### Configure Mermaid UML Support

Source: https://context7.com/facelessuser/markdownpreview/llms.txt

Enable richer UML diagram types (flowcharts, sequence diagrams, Gantt charts) using Mermaid. Include the Mermaid library and a custom configuration script.

```json
{
    "js": {
        "markdown": [
            "https://unpkg.com/mermaid@8.8.4/dist/mermaid.min.js",
            "res://MarkdownPreview/js/mermaid_config.js",
            "res://MarkdownPreview/js/mermaid.js"
        ]
    }
}
```

```markdown
<!-- In your Markdown file: -->

```mermaid
graph TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Do this]
    B -->|No|  D[Do that]
    C --> E[End]
    D --> E
```
```

--------------------------------

### Enable Third-Party Markdown Extensions

Source: https://github.com/facelessuser/markdownpreview/wiki/Using-3rd-Party-Python-Markdown-Extensions

Configure the "markdown_extensions" list in your settings to include third-party extensions. Ensure the extension's Python module path is correctly specified.

```json
"markdown_extensions": [
        "markdown.extensions.footnotes",
        "markdown.extensions.attr_list",
        "markdown.extensions.def_list",
        "markdown.extensions.tables",
        "markdown.extensions.abbr",
        "pymdownx.highlight",
        "pymdownx.betterem",
        "markdown_captions.markdown_captions", 
        // more extensions
]
```

--------------------------------

### Configure CriticMarkup Handling

Source: https://github.com/facelessuser/markdownpreview/blob/master/docs/src/markdown/usage.md

Sets how CriticMarkup is processed. Options include 'accept', 'reject', or 'none'. This setting affects 'github' and 'markdown' processors.

```js
    /*
        Sets how multimarkdown critic marks are handled.
        Setting is a string value: (accept | reject | none)
            accept: Accepts the proposed inserts and deletions (comments etc. are discarded)
            reject: Rejects the proposed inserts and deletions (comments etc. are discarded)
            none: does nothing

        Critic marks only affects "github" and "markdown" (Python Markdown).
    */
    "strip_critic_marks": "none",
```

--------------------------------

### Set Custom Temporary Folder for Markdown Preview

Source: https://github.com/facelessuser/markdownpreview/blob/master/docs/src/markdown/usage.md

Specify a custom directory for generated HTML files to avoid using the OS default. Supports relative paths, environment variables, and user placeholders. The directory will be created if it doesn't exist.

```js
    /*
        Sets a custom temporary folder for MarkdownPreview-generated HTML files. Useful if you're
        using LiveReload and don't want to use the OS default. The directory will be created if it
        doesn't exist. Relative paths are supported, and are checked against `os.path.isabs`, see
        doc: http://docs.python.org/3/library/os.path.html#os.path.isabs
        Environment variables and user "~" placeholder are supported.
        see docs: https://docs.python.org/3/library/os.path.html#os.path.expanduser
        see docs: https://docs.python.org/3/library/os.path.html#os.path.expandvars

        Examples: /tmp/custom_folder   (Linux/OSX - absolute path) 
                    C:/TEMP/MYNOTES
                    C:\\TEMP\\MYNOTES    (Windows - absolute path, forward slash or escaped back slash)
                    build                (All OS - relative path, current dir)
                    ../build             (Linux/OSX - relative path, in parent dir)
                    ..\\build            (Windows - relative path, in parent dir)
    */
    "path_tempfile": "/tmp/my_notes",
```

--------------------------------

### Configure GitHub Flavored Markdown (GFM)

Source: https://context7.com/facelessuser/markdownpreview/llms.txt

Enable GitHub API parsing for GFM features like tasklists and tables. Authenticate with a personal OAuth token to avoid rate limits and inject header IDs for anchor links.

```json
// MarkdownPreview.sublime-settings — User
{
    "enabled_parsers": ["markdown", "github"],

    // "markdown" = render as a document; "gfm" = render as a comment (enables tasklists)
    "github_mode": "gfm",

    // Personal access token (no scopes needed) — keep this secret!
    "github_oauth_token": "ghp_YourTokenHere",

    // Inject header IDs so anchor links work with GitHub's CSS
    "github_inject_header_ids": true
}

```

--------------------------------

### Configure Preview Temp File Location

Source: https://context7.com/facelessuser/markdownpreview/llms.txt

Set the directory for temporary HTML preview files. Supports absolute paths, relative paths, environment variables, and tilde expansion.

```json
// MarkdownPreview.sublime-settings — User
{
    // Linux / macOS — absolute path
    "path_tempfile": "/tmp/my_notes",

    // Windows — absolute path
    // "path_tempfile": "C:/TEMP/MYNOTES",

    // All platforms — relative to Sublime Text working directory
    // "path_tempfile": "build",

    // Using environment variables or ~
    // "path_tempfile": "~/Documents/preview"
}

```

--------------------------------

### Configure pymdownx.arithmatex for MathJax

Source: https://github.com/facelessuser/markdownpreview/blob/master/docs/src/markdown/extras.md

Configure the `pymdownx.arithmatex` extension to use a generalized MathJax configuration. Customization of Arithmatex may require adjustments to your MathJax config.

```python
    "markdown_extensions": [
        {
            "pymdownx.arithmatex": {
                "generic": true,
            },
        }
    ]
```

--------------------------------

### Render Tables in Markdown

Source: https://github.com/facelessuser/markdownpreview/blob/master/examples/test.md

Demonstrates markdown table syntax with alignment options for columns and various text formatting within cells.

```markdown
| _Colors_      | Fruits          | Vegetable         |
| ------------- |:---------------:| -----------------:|
| Red           | *Apple*         | [Pepper](#Tables) |
| ~~Orange~~    | Oranges         | **Carrot**        |
| Green         | ~~***Pears***~~ | Spinach           |
```

--------------------------------

### Python Markdown Configuration with TOC

Source: https://github.com/facelessuser/markdownpreview/blob/master/samples/sample.md

Configuration for enabling 'extra' and 'toc' extensions in Python-Markdown.

```json
{
    ...
    parser: 'markdown',
    extensions: ['extra', 'toc'],
    ...
}
```

--------------------------------

### Configure CriticMarkup Stripping

Source: https://context7.com/facelessuser/markdownpreview/llms.txt

Control how CriticMarkup annotations are handled during preview or build. Options include 'accept' (apply insertions, discard deletions), 'reject' (apply deletions, discard insertions), or 'none' (leave as-is).

```json
{
    // "accept" → apply all insertions, discard deletions and comments
    // "reject" → apply all deletions, discard insertions and comments
    // "none"   → leave CriticMarkup syntax as-is (default)
    "strip_critic_marks": "accept"
}
```

--------------------------------

### Bind Shortcut for Specific Parser and Target

Source: https://github.com/facelessuser/markdownpreview/blob/master/docs/src/markdown/usage.md

Assign a keyboard shortcut to open a Markdown preview in a specific target with a chosen parser.

```js
{ "keys": ["alt+m"], "command": "markdown_preview", "args": {"target": "browser", "parser":"markdown"} }
```

--------------------------------

### Render Fenced Code Blocks in Markdown

Source: https://github.com/facelessuser/markdownpreview/blob/master/examples/test.md

Shows how to create fenced code blocks, both with and without language highlighting, using triple backticks.

```markdown
`````
```
// Fenced **without** highlighting
function doIt() {
    for (var i = 1; i <= slen ; i^^) {
        setTimeout("document.z.textdisplay.value = newMake()", i*300);
        setTimeout("window.status = newMake()", i*300);
    }
}
```

```javascript
// Fenced **with** highlighting
function doIt() {
    for (var i = 1; i <= slen ; i^^) {
        setTimeout("document.z.textdisplay.value = newMake()", i*300);
        setTimeout("window.status = newMake()", i*300);
    }
}
```
`````
```

--------------------------------

### Configure Python Markdown Extensions

Source: https://context7.com/facelessuser/markdownpreview/llms.txt

Enable and configure built-in and PyMdown extensions using the `markdown_extensions` setting. Extensions can be specified as strings or objects with options.

```js
// MarkdownPreview.sublime-settings — User
{
    "markdown_extensions": [
        // Built-in extensions (no options needed)
        "markdown.extensions.footnotes",
        "markdown.extensions.tables",
        "markdown.extensions.abbr",
        "markdown.extensions.def_list",
        "markdown.extensions.attr_list",
        "markdown.extensions.md_in_html",
        "markdown.extensions.admonition",
        "markdown.extensions.sane_lists",
        "markdown.extensions.smarty",

        // Extension with options (object form)
        {
            "markdown.extensions.toc": {
                "permalink": true,
                // Use a Python function via special !!python/name syntax
                "slugify": {"!!python/name": "pymdownx.slugs.uslugify"}
            }
        },

        // PyMdown Extensions for GitHub-like output
        "pymdownx.betterem",
        "pymdownx.tasklist",
        {
            "pymdownx.tilde": { "subscript": false }
        },
        {
            "pymdownx.superfences": {
                "custom_fences": [
                    {"name": "mermaid", "class": "mermaid",
                     "format": {"!!python/name": "pymdownx.superfences.fence_code_format"}}
                ]
            }
        },
        {
            "pymdownx.magiclink": {
                "repo_url_shortener": true,
                "repo_url_shorthand": true
            }
        },
        {
            "pymdownx.emoji": {
                "emoji_index": {"!!python/name": "pymdownx.emoji.gemoji"},
                "emoji_generator": {"!!python/name": "pymdownx.emoji.to_png"}
            }
        }
    ]
}
```

--------------------------------

### Custom HTML Template Configuration

Source: https://github.com/facelessuser/markdownpreview/blob/master/docs/src/markdown/usage.md

Specify a custom HTML template file for rendering Markdown. Use placeholders like {{ HEAD }}, {{ BODY }}, and {{ THEME }}. Set 'skip_default_stylesheet' to true to use only your template's styles.

```json
    /*
        Specify a HTML template file to render your markdown within.

        Available place holders in HTML template:
        {{ HEAD }} - would be replaced by generated stylesheets, javascripts enabled above
        {{ BODY }} - would be replaced by HTML converted from markdown
        {{ THEME }} - specifiies preferred theme `<body data-theme="{{ THEME }}"">`

        By setting "skip_default_stylesheet" to true you can use the styles only in your HTML
        template. In most cases you should turn this setting on to have a full-featured design.

        Refer to 'customized-template-sample.html' as a show case.
    */
    "html_template": "/ABS_PATH_TO_A_HTML_FILE",
```

--------------------------------

### Markdown Headers

Source: https://github.com/facelessuser/markdownpreview/blob/master/examples/test.md

Demonstrates different levels of markdown headers from H1 to H6. Duplicate headers are also shown.

```markdown
# H1
## H2
### H3
#### H4
##### H5
###### H6
### Duplicate Header
### Duplicate Header
```

--------------------------------

### Add High-Level CSS Tweaks

Source: https://github.com/facelessuser/markdownpreview/wiki/GitLab-Online-Compiler

Applies basic CSS box-sizing and centers the body content for compatibility. Ensure these are applied before other GitLab-specific styles.

```css
* {
    box-sizing: border-box;
}

body {
    width: 980px;
    margin-right: auto !important;
    margin-left: auto !important;
}
```

--------------------------------

### Markdown Preview Extension Configuration

Source: https://github.com/facelessuser/markdownpreview/wiki/MathJax-Configuration

This JSON object configures the Markdown Preview extension, specifying JavaScript files to load and enabling various Markdown extensions, including PyMdown extensions for enhanced features like superfences, magiclinks, task lists, tildes, emojis, and arithmatex.

```json
{
	"js": [
        "https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js",
        "res://MarkdownPreview/js/math_config.js"
    ],

    /*
        Markdown extension configuration.

        To specify a function in this JSON configuration, create an object with the key "!!python/name"
        and set it to the import path to the function "module.submodule.etc.function".
    */
    "markdown_extensions": [
        // Python Markdown Extra with SuperFences.
        // You can't include "extra" and "superfences"
        // as "fenced_code" can not be included with "superfences",
        // so we include the pieces separately.
        "markdown.extensions.smart_strong",
        "markdown.extensions.footnotes",
        "markdown.extensions.attr_list",
        "markdown.extensions.def_list",
        "markdown.extensions.tables",
        "markdown.extensions.abbr",
        {
            "markdown.extensions.codehilite": {
                "guess_lang": false
            }
        },
        // Extra's Markdown parsing in raw HTML cannot be
        // included by itself, but "pymdownx" exposes it so we can.
        "pymdownx.extrarawhtml",

        // More default Python Markdown extensions
        {
            "markdown.extensions.toc":
            {
                "permalink": "\ue157"
            }
        },
        "markdown.extensions.meta",
        "markdown.extensions.sane_lists",
        "markdown.extensions.smarty",
        "markdown.extensions.wikilinks",
        "markdown.extensions.admonition",

        // PyMdown extensions that help give a GitHub-ish feel
        "pymdownx.superfences",  // Nested fences and UML support
        {
            "pymdownx.magiclink": {   // Auto linkify URLs and email addresses
                "repo_url_shortener": true,
                "repo_url_shorthand": true
            }
        },
        "pymdownx.tasklist",     // Task lists
        {
            "pymdownx.tilde": {  // Provide ~~delete~~
                "subscript": false
            }
        },
        {
            "pymdownx.emoji": {  // Provide GitHub's emojis
                "emoji_index": {"!!python/name": "pymdownx.emoji.gemoji"},
                "emoji_generator": {"!!python/name": "pymdownx.emoji.to_png"},
                "alt": "short",
                "options": {
                    "attributes": {
                        "align": "absmiddle",
                        "height": "20px",
                        "width": "20px"
                    },
                    "image_path": "https://assets-cdn.github.com/images/icons/emoji/unicode/",
                    "non_standard_image_path": "https://assets-cdn.github.com/images/icons/emoji/"
                }
            }
        },
        {
        	"pymdownx.arithmatex":
        	{
            	"generic": true,
                "smart_dollar": false
            }
        }
    ],
}
```

--------------------------------

### Render Attribute Lists in Markdown

Source: https://github.com/facelessuser/markdownpreview/blob/master/examples/test.md

Demonstrates how to add attributes, like CSS styles, to markdown elements using curly braces.

```markdown
Normal Text

Modified Text
{: style="font-weight:bold;" }
```

--------------------------------

### Markdown Links and Images

Source: https://github.com/facelessuser/markdownpreview/blob/master/examples/test.md

Shows different ways to create links, reference links, footnotes, and embed web or local images using Markdown.

```markdown
[Reference Link][1]

Footnotes[^1] have a label[^label] and a definition[^!DEF]

Web image
![Web Picture](http://www.revolunet.com/static/parisjs8/img/logo-revolunet-carre.jpg "Web Picture")

Local image
![Local Picture](logo-revolunet-carre.jpg "Local Picture")

contact@revolunet.com

@revolunet

Issue #1

https://github.com/revolunet/sublimetext-markdown-preview/

This is a link https://github.com/revolunet/sublimetext-markdown-preview/.

This is a link "https://github.com/revolunet/sublimetext-markdown-preview/".

With this link (https://github.com/revolunet/sublimetext-markdown-preview/), it still works.

    [1]: https://github.com/revolunet/sublimetext-markdown-preview/
    [^1]: This is a footnote
    [^label]: A footnote on "label"
    [^!DEF]: The footnote for definition
```

--------------------------------

### Enable LiveReload for Auto-Reload on Save

Source: https://context7.com/facelessuser/markdownpreview/llms.txt

Configure Markdown Preview to automatically refresh the browser when the Markdown file is saved. Requires the LiveReload Sublime Text package and specific settings for temporary file paths.

```json
// Step 1 — MarkdownPreview.sublime-settings — User
{
    "enable_autoreload": true,

    // Use a stable temp path so LiveReload can find the file reliably
    "path_tempfile": "/tmp/my_markdown_preview"
}

// Step 2 — Install LiveReload from Package Control
// Step 3 — Restart Sublime Text
// Step 4 — Command Palette → LiveReload: Enable/disable plug-ins
//           → Select "Simple Reload with delay (400ms)"
// Step 5 — Edit your .md file and watch the browser update on save

```

--------------------------------

### Configure Image Path Conversion

Source: https://github.com/facelessuser/markdownpreview/blob/master/docs/src/markdown/usage.md

Control how image paths are handled in previews. Options include 'absolute', 'relative', 'base64' (for embedding), and 'none'.

```json
    /*
        Sets how image paths are handled.
        Setting is a string value: (absolute | relative | base64 | none)
            absolute: converts relative local paths to absolute
            relative: converts relative local paths to a path relative to the
                        HTML output
            base64: coverts the local file to base64 and embeds it in the HTML
            none: does nothing
    */
    "image_path_conversion": "absolute",
```

--------------------------------

### Path Conversion for Images and Links

Source: https://context7.com/facelessuser/markdownpreview/llms.txt

Control how local image paths and file links are resolved in the generated HTML. Options include 'absolute', 'relative', 'base64' (for images), and 'none'.

```json
// MarkdownPreview.sublime-settings — User
{
    // Image path handling:
    // "absolute" → converts to absolute local path (default)
    // "relative" → keeps path relative to the HTML output
    // "base64"   → embeds image data inline as base64
    // "none"     → no conversion
    "image_path_conversion": "base64",

    // File link path handling: "absolute" | "relative" | "none"
    "file_path_conversions": "absolute"
}

```

--------------------------------

### Configure Python Markdown Extensions

Source: https://github.com/facelessuser/markdownpreview/blob/master/docs/src/markdown/usage.md

Specify Python Markdown extensions to use by their import path in the `markdown_extensions` array.

```js
    "markdown_extensions": [
        "markdown.extensions.toc"
    ]
```

--------------------------------

### Enable CSS Overrides

Source: https://github.com/facelessuser/markdownpreview/blob/master/docs/src/markdown/usage.md

Allow custom CSS files to be applied based on file type. This setting must be enabled for file-specific CSS to work.

```js
    "allow_css_overrides": true,
```

--------------------------------

### Map External Markdown Parsers

Source: https://context7.com/facelessuser/markdownpreview/llms.txt

Configure the plugin to use external Markdown binaries like MultiMarkdown or Pandoc by mapping them to a name and specifying their command-line arguments.

```json
// MarkdownPreview.sublime-settings — User
{
    // Map parser name → binary path + arguments
    "markdown_binary_map": {
        "multimarkdown": ["/usr/local/bin/multimarkdown"],
        "pandoc": ["/usr/local/bin/pandoc", "--from=markdown", "--to=html5"]
    },

    // Enable the custom parsers alongside built-ins
    "enabled_parsers": ["markdown", "github", "multimarkdown", "pandoc"]
}
```

--------------------------------

### Configure Enabled Markdown Parsers

Source: https://context7.com/facelessuser/markdownpreview/llms.txt

Specify which Markdown parsers are available in the plugin and set the default parser for the build command.

```json
// MarkdownPreview.sublime-settings — User
{
    // Parsers shown in the quick-panel selector
    "enabled_parsers": ["markdown", "github", "gitlab"],

    // Default parser for Cmd+B / Ctrl+B build
    "parser": "markdown",

    // Open a specific browser for preview (path or "default")
    "browser": "default"
    // macOS example: "browser": "/Applications/Google Chrome.app"
    // Linux example: "browser": "/usr/bin/firefox"
}
```

--------------------------------

### Collapsible Alerts and Admonitions

Source: https://github.com/facelessuser/markdownpreview/blob/master/examples/test.md

Demonstrates the use of `<details>` tags for collapsible content and various admonition types like Note, Tip, Warning, Caution, and Important. These are useful for structuring information and highlighting key points.

```markdown
<details markdown>
<summary>Summary</summary>

Content **section**.

</details>

> [!Note]+
> :smile:
> 
> > Not all markup can be placed in these boxes, but you can fit all sorts of things in them.
> 
> Stuff like _this_ works too.
> 
> | _Colors_      | Fruits          | Vegetable    |
> | ------------- |:---------------:| ------------:|
> | Red           | *Apple*         | Pepper       |
> | ~~Orange~~    | Oranges         | **Carrot**   |
> | Green         | ~~***Pears***~~ | Spinach      |

> [!tip]+ Tip!
> - Here is some info.
> - And some more

> [!warning]+ Warning!
> - [X] Make sure you turn off the stove
> - [X] Don't run with scissors

> [!caution]+ Alert!
> You really need to read [this](#admonition)!

> [!important]+
> This is important
```

```markdown
<details markdown>
<summary>Summary</summary>

Content **section**.

</details>

> [!Note]+
> :smile:
> 
> > Not all markup can be placed in these boxes, but you can fit all sorts of things in them.
> 
> Stuff like _this_ works too.
> 
> | _Colors_      | Fruits          | Vegetable    |
> | ------------- |:---------------:| ------------:|
> | Red           | *Apple*         | Pepper       |
> | ~~Orange~~    | Oranges         | **Carrot**   |
> | Green         | ~~***Pears***~~ | Spinach      |

> [!tip]+ Tip!
> - Here is some info.
> - And some more

> [!warning]+ Warning!
> - [X] Make sure you turn off the stove
> - [X] Don't run with scissors

> [!caution]+ Alert!
> You really need to read [this](#admonition)!

> [!important]+
> This is important
```

--------------------------------

### Configure CSS for Markdown Parsers

Source: https://context7.com/facelessuser/markdownpreview/llms.txt

Specify custom CSS files or use 'default' to include built-in styles for different markdown parsers. External CSS can be local paths or URLs. 'res://' is used for package-relative paths.

```json
// MarkdownPreview.sublime-settings — User
{
    "css": {
        // "default" keyword loads the built-in stylesheet for that parser
        "markdown": [
            "default",
            "/path/to/my/custom.css",
            "https://example.com/extra.css"
        ],
        // Use res:// to reference files inside a zipped Sublime package
        "github": [
            "default",
            "res://MarkdownPreview/css/markdown.css"
        ],
        "gitlab": ["default"]
    },

    // Automatically apply <filename>.css when previewing <filename>.md
    "allow_css_overrides": true,

    // Supported filetypes for CSS override matching
    "markdown_filetypes": [".md", ".markdown", ".mdown"],

    // Omit HEAD (CSS/JS) from specific output targets if needed
    "include_head": ["build", "browser", "sublime", "clipboard", "save"]
}

```

--------------------------------

### Mermaid JS Libraries Configuration

Source: https://github.com/facelessuser/markdownpreview/blob/master/docs/src/markdown/extras.md

Configure the JavaScript libraries required for Mermaid UML rendering. Ensure the user configuration is loaded before the Mermaid loader.

```json
    "js": [
        // Mermaid library
        "https://unpkg.com/mermaid@8.8.4/dist/mermaid.min.js",
        // User configuration, should be loaded before the loader
        "res://MarkdownPreview/js/mermaid_config.js",
        // Mermaid loader
        "res://MarkdownPreview/js/mermaid.js"
    ]
```