<commit_before># DocFX Flavored Markdown Preview
------------

[![Current Version](http://vsmarketplacebadge.apphb.com/version/docfxsvc.DocFXPreview.svg)](http://marketplace.visualstudio.com/items?itemName=docfxsvc.DocFXPreview)
[![Install Count](http://vsmarketplacebadge.apphb.com/installs/docfxsvc.DocFXPreview.svg)](https://marketplace.visualstudio.com/items?itemName=docfxsvc.DocFXPreview)
[![Open Issues](http://vsmarketplacebadge.apphb.com/rating/docfxsvc.DocFXPreview.svg) ](https://marketplace.visualstudio.com/items?itemName=docfxsvc.DocFXPreview)

An extension to support [**DFM**](https://dotnet.github.io/docfx/spec/docfx_flavored_markdown.html) for Visual Studio Code! The preview provides the following features:

* Preview the `DFM` to the side
* Preview the `TokenTree` to the side
* Match the markdown file to the tokenTree node
* Match the tokenTree node to the markdown file

# Quick Start
* Install the extension
> **Note:** Upgrade to Visual Studio Code 1.3.0 or above.
* Open a markdown file which includes `DFM` syntax
* Use the `Preview` and `TokenTree`
> **Note:** If you want to use `DFM` features `File include` and `Code Snippets`, You have to open a folder which includes your target markdown files

# Document
For further information and details about DocFX Flavored Markdown, please reference [DocFX Flavored Markdown](https://dotnet.github.io/docfx/spec/docfx_flavored_markdown.html)

# Feature Details
## Live preview
| Shortcuts | command title | command |
|:-------|:--------|:--------|
| `ctrl+shift+q` | `Toggle Dfm Preview` | Preview  |
| `ctrl+k q` | `Open Dfm Preview to the side` | Preview to side |
|  | `show Dfm Show` | Show Source |

  ![PreviewToside](images/previewToSide.gif)

## Token tree
| Shortcuts | command title | command |
|:-------|:--------|:--------|
| `ctrl+shift+t` | `Open Dfm Preview to the side` | TokenTreeToSide  |

  - Expand and collapse the nodes by clicking the circle of node

  - Display the detailed information of node on mouseover

  ![TokenTree](images/Tokentree.gif)

- Match between markdown file with tokenTree Node
  - Click/select the text you want to match to the tokenTree
    > You can select multiple lines.
  - Click the text of node to match to the markdown file

  ![Match](images/Match.gif)

# Found a Bug?
Please file any issue through the [Github Issue](https://github.com/dotnet/docfx/issues) system.
<commit_msg>Fix broken images for docfx preview extension (#1775)<commit_after># DocFX Flavored Markdown Preview
------------

[![Current Version](http://vsmarketplacebadge.apphb.com/version/docfxsvc.DocFXPreview.svg)](http://marketplace.visualstudio.com/items?itemName=docfxsvc.DocFXPreview)
[![Install Count](http://vsmarketplacebadge.apphb.com/installs/docfxsvc.DocFXPreview.svg)](https://marketplace.visualstudio.com/items?itemName=docfxsvc.DocFXPreview)
[![Open Issues](http://vsmarketplacebadge.apphb.com/rating/docfxsvc.DocFXPreview.svg) ](https://marketplace.visualstudio.com/items?itemName=docfxsvc.DocFXPreview)

An extension to support [**DFM**](https://dotnet.github.io/docfx/spec/docfx_flavored_markdown.html) for Visual Studio Code! The preview provides the following features:

* Preview the `DFM` to the side
* Preview the `TokenTree` to the side
* Match the markdown file to the tokenTree node
* Match the tokenTree node to the markdown file

# Quick Start
* Install the extension
> **Note:** Upgrade to Visual Studio Code 1.3.0 or above.
* Open a markdown file which includes `DFM` syntax
* Use the `Preview` and `TokenTree`
> **Note:** If you want to use `DFM` features `File include` and `Code Snippets`, You have to open a folder which includes your target markdown files

# Document
For further information and details about DocFX Flavored Markdown, please reference [DocFX Flavored Markdown](https://dotnet.github.io/docfx/spec/docfx_flavored_markdown.html)

# Feature Details
## Live preview
| Shortcuts | command title | command |
|:-------|:--------|:--------|
| `ctrl+shift+q` | `Toggle Dfm Preview` | Preview  |
| `ctrl+k q` | `Open Dfm Preview to the side` | Preview to side |
|  | `show Dfm Show` | Show Source |

  ![PreviewToside](/tools/VscPreviewExtension/images/previewToSide.gif)

## Token tree
| Shortcuts | command title | command |
|:-------|:--------|:--------|
| `ctrl+shift+t` | `Open Dfm Preview to the side` | TokenTreeToSide  |

  - Expand and collapse the nodes by clicking the circle of node

  - Display the detailed information of node on mouseover

  ![TokenTree](/tools/VscPreviewExtension/images/Tokentree.gif)

- Match between markdown file with tokenTree Node
  - Click/select the text you want to match to the tokenTree
    > You can select multiple lines.
  - Click the text of node to match to the markdown file

  ![Match](/tools/VscPreviewExtension/images/Match.gif)

# Found a Bug?
Please file any issue through the [Github Issue](https://github.com/dotnet/docfx/issues) system.

{'fraction_non_alphanumeric': 0.13298195824042164, 'fraction_numerical': 0.002027163997567403, 'mean_word_length': 4.334054054054054, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 9, 'https://': 10, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3813629', 'n_tokens_mistral': 1579, 'n_tokens_neox': 1522, 'n_words': 471}