according to export_on_save

Add the front-matter like below:

---
export_on_save:
  html: true
---

So the html file will be generated every time you save your markdown file.

But it seems not work, after I enter ctrl + s. The html not change or generate, even I delete the *.html file

The editor syntax highlighting in math sections is rendered just like regular MarkDown, as in underscores are interpreted as emphasis rather than subscripts:

It would be nice if it were styled similar to how GitHub styles LaTeX:

\[
  \begin{aligned}
    A \cup (B_1 \cap B_2 \cap \ldots \cap B_n) &= (A \cap B_1) \cup (A \cap B_2) \cup \ldots \cup (A \cap B_n) \\
    A \cup (B_1 \cap B_2 \cap \ldots \cap B_{n+1}) &= (A \cap B_1) \cup (A \cap B_2) \cup \ldots \cup (A \cap B_{n+1}) \\
    A \cup [(B_1 \cap B_2 \cap \ldots \cap B_n) \cap B_{n+1}] \\
    \space [A \cup (B_1 \cap B_2 \cap \ldots \cap B_n)] \cap (A \cup B_{n+1}) \\
  \end{aligned}
\]

(The \space prefixing the last line is there because KaTeX errored when it began with [)

Atom 1.23.2 on 64-bit Ubuntu 16.04. Clean install with only markdown-preview-enhanced, grammar-markdown extra packages and pen-paper-coffee theme.

I need an embedded script to post-process the html and wrap some text in tags. MWE below.

Expected behavior: the words "Lorem ipsum" highlighted in preview.
What actually happens: the highlight blinks for a split second, and then reverts to the original state.

This is not specific to markdown-preview-enhanced (same behavior with the default markdown-preview and markdown-preview-plus), but specific to Atom (another editor does not do this).

I noticed that if I close the markdown file, but leave the preview open, then the formatting sometimes stays on in the preview. It is rendered correctly in the static generated html.

Lorem ipsum
===========

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<script>
  const textList = Array.from( document.querySelectorAll("p"));
  for (var i = 0; i < textList.length; ++i) {
    textList[i].innerHTML = textList[i].innerHTML.replace(/Lorem ipsum/g,
    function replace(match) {
      return '<mark>' + match + '</mark>';
       });
       // uncomment to check that the formatting happens as expected
       //alert(textList[i].innerHTML);
  }
</script>

你好，我是markdown的新手，我下载了VS code发现了该插件。其中其他markdown的语法支持都还好，但是只要是写plantuml的语法就会报错。
错误 无法打开“MPE Preview”: write EPIPE。

• LineNo class for atom edition

• numberLines class for pandoc markdown

• but line-numbers class for vscode edition

It is better to change the notation of atom and vscode edition to pandoc markdown notation.

现在公式比文字稍微大一点，想要调成一样大的该怎么做？

The KaTeX array separator is rendered in black, regardless of the style picked in the settings.

\[
  f(x) \text{ is } O(g(x)) \Longleftrightarrow \exists ~ c, x_0
  \left|
  \begin{array}{|c}
    f(x) \leq c \cdot g(x), \\
    \text{for all } x > x_0
  \end{array}
  \right.
\]

produces:

It is hard to see here, but there are two \suchthat symbols. The white one is rendered by \left| ... \right., and the black one is rendered by \begin{array}{|c} ... \end{array}.

难道这个插件没有vscode里面的配置项供用户定制吗？

Unable to open '': Invalid file resource (file://c:\users\milen.markdown-preview-enhanced\mermaid_config.js).
Close
Error

On linux my dot ... code blocks don't render, however the same files render fine on windows.

I'm using vs code insiders 1.15.0 on both machines.
MPE version 0.2.1 on both machines

The preview panel is visible but contains the source text minus the ``` lines.

1、在预览区上下滚动的时候，编辑区会同步滚动
2、但是，在编辑器鼠标或触摸板上下滚动的时候，预览区不会同步滚动。
3、如果在编辑区移动光标到文档某个位置，预览区会同步到相应的位置。

所以现在的问题是，在编辑区上下滚动浏览的时候，预览区不会同步滚动。不知道这是就这样设计的，还是哪儿出问题了？？？

I used this extension in vscode 1.14.2 of LinuxMint 18.2.
When I edited longer documents, MD preview and editor screens did not match.

To scroll preview screen manually, I turned off the sync scroll option ("markdown-preview-enhanced.scrollSync": false), but preview scrolled with moving cursor of editor in unmatched state.

Is there a way to stop scrollSync or to match preview and editor?

Hi

I want a setup with a dark theme that matches a vscode dark theme. The way I've done this is modify style.less to add background: none;. This works fine with github dark + monokai for example, and looks very nice. However, it breaks the slides example horribly.

Is there any way to override this style only in markdown mode and not in presentation mode. Or can I solve this in some other way?

I want to be able to insert this script to be shown as preview:

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
    config: ["MMLorHTML.js"],
    jax: ["input/TeX", "output/HTML-CSS", "output/NativeMML"],
    extensions: ["MathMenu.js", "MathZoom.js"],
    TeX: {
      equationNumbers: {autoNumber: "AMS"}
    }
});
</script>

What it does is it enables the use of \label and \ref for MathJax which I desperately need in MPE.

Hi great package its the best for markdown I have found!

Anyway I have a feature request. Add option to allow preview to open in a split screen top is md and the bottom is the preview. Instead of current: left is md and right is preview.

So this would be like split down instead of split right. I did try manually moving that preview window down but it caused issues.

Not work 'Customize css' after migrating core library to Mume.

This extension is just so powerful and great! Thank you so much.
But, I just encountered some small problems when export the md file to pdf.

• The first problem of the exported pdf is: all the fraction line have gone? (see following figure)
  
• Also see the above figure. The font is not the same as the markdown file. It's more bold and not clear for reading.
• How to change the margin of the exported pdf?

PS: should the figure be aligned centered by default?
Many thanks.

example:

<!-- 123
#123
123
-->

VS Code 中使用。
看到快捷键是 F，但是按了没反应。

I use mathjax to render equations and the equation number property is missing.

is rendered as:

If I open in browser, the equation is shown, but equation number is still missing

So, when I use $eqref(2.4)$, it is rendered as:

Usually, I just need to add the following script in html to add the support:

<script type="text/x-mathjax-config"> MathJax.Hub.Config({ TeX: { equationNumbers: { autoNumber: "AMS" } } }); </script>

But I can't find any configuration for it. It would be great to add this configuration support.

I really appreciate your work and now I use it for my daily notes.
Thank you!

• issues
  • toc
  • improt pdf file

environment

1. MPE test base on 0.1.4
2. win10 64
3. VS code version 1.13.1

toc

1. has no effect
2. if there is a active atom open the same file it may lead to the atom's markdown-preview-enhanced TOC not working.

improt pdf file

1. the same as can't open the file

https://github.com/tmori3y2/MPE-Test/blame/master/vscode/import/test_import_001_.md

test_import_001_.md is the compiled markdown.

The atx headers converted into the html headers.

Of course, markdown supports html notation.

But it is the better to keep markdown notation.

Best Regards

vscode 和 Atom 中的 MPE 插件都出现了插入本地图片无法显示的情况，用编辑器自带的 markdown 预览就可以正常看到图片。

Hi @shd101wyy !

see here.

https://github.com/tmori3y2/MPE-Test/tree/master/vscode/import

Hi,

the inline (single back-tick) code highlighting doesn't seem to adopt the same theme as the (triple-back-ticks) code block.

Here is an example:

my related user settings:

"markdown-preview-enhanced.previewTheme": "github-dark.css",
"markdown-preview-enhanced.codeBlockTheme": "atom-light.css"

Is this expected behavior? If so, how do we customize the inline code highlight?

P.S. I am using VSCode: 1.15.1, markdown-preview-enhanced 0.2.7

mermaid_config.js里写入如下设定后，gantt无法生成了。
同样的设定在atom版下是可以生成的

// config mermaid init call
// http://knsv.github.io/mermaid/#configuration
//
// you can edit the 'config' variable below
// everytime you changed this file, you may need to restart atom.
let config = {
  startOnLoad: true,
  gantt: {
    barHeight: 20,
    //barHeight: 40,
    fontSize: 11,
    //fontSize: 50,
    axisFormatter: [
      // Within a day
      ["%I:%M %p", function(d) {
        return d.getHours();
      }],
      // Monday a week
      ["%m/%d", function(d) {
        return d.getDay() == 1;
      }],
      // Day within a week (not monday)
      ["%m/%d", function(d) {
        return d.getDay() && d.getDate() != 1;
      }],
      // within a month
      ["%m/%d", function(d) {
        return d.getDate() != 1;
      }],
      // Month
      ["%y-%m", function(d) {
        return d.getMonth();
      }]
    ]
  }
}
module.exports = config || {
  startOnLoad: false
}

Thank you for your plug.
According to the documt Extended syntax / table . I can use ^ > to combine cell .
But When I use VSCode 1.17.2 (1.17.2) + Markdown-preview 0.3.0 , it seems not work.
just like this.

Here is the plain text

|a|b|c|
|---|---|---|
|1|2|3|
|4|5|6|



colspan `>` or `empty cell`:

|a|b|
|---|---|
| > | 3 |
|4||

rowspan `^`

| a | b |
|---|---|
| 1 | 2 |
| ^ | 4 |

如题，今天自动升级到1.14后发现设定被初始化了

Not sure why this isn't an option already. I'd like the preview window to automatically open. There is another plugin that offers this, but doesn't use the this enhanced preview.

When trying to open the preview (both with Ctrl+Shift+M and Ctrl+Shift+P > 'Markdown Preview Enhanced: Open Preview', the following error message appears.

I installed MPE on VSCode just yesterday and it worked until I shut down my computer normally and tried to work in markdown this morning.

MPE works flawlessly with KaTeX. This problem only occurs when rendering math with MathJax.

I don't know if it is related, but MPE stopped working on Atom as well, where the preview just won't open without any error message. This problem also just occurred this morning. I submitted an issue on this in the repository for MPE on Atom: https://github.com/shd101wyy/markdown-preview-enhanced/issues/504

Any help would be much appreciated.

Is it possible to style GraphViz diagrams? There is no setting to change the GraphViz theme, and it is kind of jarring:

Also, it would be nice to have some VSCode specific themes rather than the ones for Atom, but I bet that is in the works already.

在Windows 10 64位 vs code 1.19.1下， 使用使用 chrom(puppeteer) 导出PDF时总是提示要全局安装puppeteer。
错误 Puppeteer (Headless Chrome) is required to be installed globally. Please run npm install -g puppeteer in your terminal.
而puppeteer已经通过cnpm install -g puppeteer命令成功安装过了。

汇报两个问题

1. plantuml转换后的图片中的日文为乱码

```puml
@startuml
title 性能測定機能ユースケース図
left to right direction
actor 保守
usecase 性能測定機能を実行する
usecase 性能測定結果を確認する
usecase 性能測定結果を比較する
'relationship'
保守 --> 性能測定機能を実行する
保守 --> 性能測定結果を確認する
保守 --> 性能測定結果を比較する
@enduml
```

2. mermaid无法转换出图像文件，转换后*_.md中还是代码的形式

```mermaid
gantt
  dateFormat  YYYY-MM-DD
    task1:task1-1,2017-09-04,4d
    task2:task1-2,2017-09-04,10d
    task3:task1-3,2017-09-04,10d
    task4:task1-4,2017-09-04,5d

```

When toggle to another MD file It still show the old MD preview.

Can't close MPE preview by ctrl+shift+M if it has opened because of the conflict hotkey ( pannel -->problems)

• vscode
  

窗口的拉伸会改变图形的长宽比例

• atom
  

窗口的拉伸不改变图形的长宽比例

个人还是希望能维持atom版的显示效果。

两个版本都用的如下style.css

/*
 * Your Stylesheet
 *
 * This stylesheet is loaded when Atom starts up and is reloaded automatically
 * when it is changed and saved.
 *
 * Add your own CSS or Less to fully customize Atom.
 * If you are unfamiliar with Less, you can read more about it here:
 * http://lesscss.org
 */


/*
 * Examples
 * (To see them, uncomment and save)
 */

// style the background color of the tree view
.tree-view {
  // background-color: whitesmoke;
}

// style the background and foreground colors on the atom-text-editor-element itself
atom-text-editor {
  // color: white;
  // background-color: hsl(180, 24%, 12%);
}

// To style other content in the text editor's shadow DOM, use the ::shadow expression
atom-text-editor::shadow .cursor {
  // border-color: red;
}

.minimap .cursor-line {
  background: green;
}

/*
 * markdown-preview-enhanced custom style
 */
.markdown-preview-enhanced-custom {
  // please write your custom style here
  // eg:
  //  color: blue;          // change font color
  //  font-size: 14px;      // change font size
  //テーブルをもっとコンパクトにする
  th, td {
    padding: 5px 10px;
  }
  //タイトル行の背景をグレーにする
  th {
    background: #EEE;
  }
  //テーブルの全内容を1ページに収めるようにする
  table{
    width:100%;
    table-layout: fixed;
    word-break: break-word;
  }
  width: 100%;
  //height: 100%;
  // custom pdf output style
  .plantuml {
    svg{
      width: 100%;
      height: 100%;
    }
  }
  .mermaid {
    svg{
      width: 100%;
      //height: 100%;
      //width: 854px;
      //height: 480px;
      //width: 1280px;
      //height: 720px;
      //width: 1920px;
      //height: 1080px;
      //width: 1080px;
      //height: 1900px;
    }
  }
  .mermaid .today {
    stroke: red ;
    stroke-width: 0px ;
  }
  //章節番号設定開始
  h1 {
      counter-reset: h2counter;
  }
  h2 {
      counter-increment: h2counter;
      counter-reset: h3counter;
  }
  h3 {
      counter-increment: h3counter;
      counter-reset: h4counter;
  }
  h4 {
      counter-increment: h4counter;
  }
  h2:before {
      content: counter(h2counter) ". ";
  }
  h3:before {
      content: counter(h2counter) "." counter(h3counter) ". ";
  }
  h4:before {
      content: counter(h2counter) "." counter(h3counter) "." counter(h4counter) ". ";
  }
  //章節番号設定終了

  @media print {

  }

  // custom phantomjs png/jpeg export style
  &.phantomjs-image {

  }

  //custom phantomjs pdf export style
  &.phantomjs-pdf {

  }

  // custom presentation style
  .preview-slides .slide,
  &[data-presentation-mode] {
    // eg
    // background-color: #000;
  }
}

// please don't modify the .markdown-preview-enhanced section below
.markdown-preview-enhanced {
  .markdown-preview-enhanced-custom() !important;
}


/*
 * markdown-preview-enhanced custom style
 */
.markdown-preview-enhanced.markdown-preview-enhanced {
  // please write your custom style here
  // eg:
  //  color: blue;          // change font color
  //  font-size: 14px;      // change font size
  //

  // custom pdf output style
  @media print {

  }

  // custom prince pdf export style
  &.prince {

  }

  // custom phantomjs png/jpeg export style
  &.phantomjs-image {

  }

  //custom phantomjs pdf export style
  &.phantomjs-pdf {

  }

  // custom presentation style
  .preview-slides .slide,
  &[data-presentation-mode] {
    // eg
    // background-color: #000;
  }
}

plantuml用的是如下代码：

@startuml
node "ChMB"{
  folder "Input Data"{
    [入力ファイル]
    note right of [入力ファイル]
      キャッシュ：①性能測定テスト001
     end note
  }
File_Operation2 -down-> [非同期型ChMB]
[非同期型ChMB] -down-> 送信thread1
[非同期型ChMB] -down-> 送信thread2

  note right of [非同期型ChMB]
  下記を「①性能測定記録001」キャッシュに記入
  ・メッセージ送信時間
　・フロー処理時間
   end note

   folder "output Data"{
     [結果ファイル]
   }
   [ファイル出力アプリ]

}
[入力ファイル]->File_Operation2

node "EAP"{

    送信thread1 -> [RPE1]:メッセージの送信回数数は可変
    [RPE1]-down->Cache_操作1:各処理の回数は可変\n「①性能測定テスト001」キャッシュをDFSに投入
      note right of Cache_操作1:DFSに対する\newpagePut\nGet\nSearchOrder\nRemove
      note right of [RPE1]
      「性能測定記録001」キャッシュに
      キャッシュ操作の時間を記入
       end note



    送信thread2 -> [RPE2]
    [RPE2]-down->Cache_操作2:各処理の回数は可変\n「①性能測定テスト001」キャッシュをDFSに投入
    note right of Cache_操作2:DFSに対する\newpagePut\nGet\nSearchOrder\nRemove
    note right of [RPE2]
    「②性能測定記録001」キャッシュに
    キャッシュ操作の時間を記入
     end note

}
database DFS

Cache_操作1 -> DFS : ユニックIDと処理性能を\n「②性能測定記録001」キャッシュとしてDFSに投入
Cache_操作2 -> DFS
DFS -down-> [ファイル出力アプリ]:SiriusExporterで「②性能測定記録001」キャッシュの全Valueを抽出
note right of DFS:「①性能測定テスト001」キャッシュ\n「②性能測定記録001」キャッシュ
[ファイル出力アプリ] -down->[結果ファイル]
note right of [結果ファイル]:■性能統計\n ChMB送信,キャッシュ操作各処理のMax時間\n ChMB送信,キャッシュ操作各処理のMin時間\n ChMB送信,キャッシュ操作各処理の平均時間\n レコード処理スループット（分間)
@enduml

According to the KaTeX docs, \iff should produce the same output as \Longleftrightarrow, but it actually throws a parse error.

\[
  \iff
\]

causes

ParseError: KaTeX parse error: Expected 'EOF', got '\iff' at position 1: \̲i̲f̲f̲

I dont know where to set the config in vscode ...
In vscode's setting, I cant find it...

digraph G{
homekeypress [shape=diamond,label="home key press more than 7s?"];
powerOff[shape =circle,fixedsize = true,width=.8,label = "power off",style = filled,fillcolor="#c9c9c9"];
PowerOn[shape = circle,fixedsize = true,width=.9,label = "power on",style = filled,fillcolor="#00cc00"];
powerOff -> homekeypress;
homekeypress -> poweron[label="Y"];
PowerOn[label="home key press 7s"];
}

It works well on atom with MPE. @shd101wyy
Restart the vscode . Get right.

Hi @shd101wyy ,

I have a parent.md file where I import 2 childs (child1.md and child2.md). The parent contains the TOC and it reads without problem the header structure from both children.

parent.md file:

# MJA Menu

## Table of Contents

<!-- @import "[TOC]" {cmd="toc" depthFrom=2 depthTo=3 orderedList=false} -->
<!-- code_chunk_output -->

* [Table of Contents](#table-of-contents)
* [Child1 Header](#child1-header)
* [Child2 Header](#child2-header)

<!-- /code_chunk_output -->

@import "child1.md"
@import "child2.md"

child1.md file:

## Child1 Header
...

child2.md file:

## Child2 Header
...

Till here everything okay. The issue comes when I update a header in any of the child files. Once I have created a TOC table in the parent, it doesn't update the entry. It adds new headers, but doesn't update/remove existing ones.

Didn't work:

• Delete the TOC partially or completelly.
• Change TOC depthFrom and depthTo values.
• Open/close preview panel.

The only work-around I've found is to reload Atom.

Let me know if you need any other detail

When exporting to PDF file, The [toc] link is absolute path. This causes the toc index doesn't work in PDF file.

Is it possible to change the link to relative path?

Thanks.

When creating a local file link like in Markdown file, I usually convert the file system path to URL to avoid the illegal characters in file system path. For example, to link a file with space like note text.pdf, the URL will be

[Note](note%20text.pdf)

This works.

But if the file name is note^text.pdf, according the convert result, the link will be

[Note](note%5Etext.pdf)

This doesn't work in vscode version( 0.2.5), but it works in Atom version (0.13.0)

1. win10
2. preview loading a long time
3. shows the same like open a pdf in notepad++ directly
4. @import png and other file is ok .
5. pdf2svg is ok in powershell test.

Problem:
If you try to import a picture and give it width + height, only the width is scaling properly.
This problem only occurs when you try to convert from .md to .pdf.

How to recreate the problem:

• create a .md file
• try to import a picture and set the resolution (height needs to be higher):
  "@import "test.jpg" {width:"400px", height:"1000px", title:"my title", alt:"my alt"}

OS: Win10
IDE: vscode
Converter from .md to .pdf: phantomJS

To reproduce :

1. Start Atom
2. Open the "install packages" view

Atom: 1.24.0-beta2 x64
Electron: 1.6.15
OS: Microsoft Windows 7 Enterprise
Thrown From: markdown-preview-enhanced package 0.15.1

Stack Trace

Uncaught Error: tunneling socket could not be established, statusCode=407

At stream.js:74

Error: tunneling socket could not be established, statusCode=407
    at ClientRequest.onConnect (/packages/markdown-preview-enhanced/node_modules/tunnel-agent/index.js:166:19)
    at Object.onceWrapper (events.js:290:19)
    at emitThree (events.js:116:13)
    at ClientRequest.emit (events.js:194:7)
    at Socket.socketOnData (_http_client.js:394:11)
    at emitOne (events.js:96:13)
    at Socket.emit (events.js:188:7)
    at readableAddChunk (_stream_readable.js:176:18)
    at Socket.Readable.push (_stream_readable.js:134:10)
    at TCP.onread (net.js:551:20)

Commands

Non-Core Packages

dracula-syntax 2.0.5 
language-batchfile 0.7.1 
language-mermaid 0.6.0 
language-powershell 4.0.0 
language-reg 0.0.0 
markdown-preview-enhanced 0.15.1 
minimap 4.29.7 
mr-markdown-pdf 1.6.0 
read-only-indicator 0.7.0 
scroll-sync 0.2.4 
selection-highlight 0.1.6 
sort-lines 0.18.0 
split-diff 1.5.2 
xml-formatter 0.11.0 

Hi @shd101wyy !

I'm a heavy user of your package in Atom, and I want to move completely to VSCode. However, I miss some very useful functionalities such as autocompletion when adding a new line in a bullet list, numbered list or task.

This is the behaviour in atom:

Please note that I only pressed enter to add a new line, and the bullet, number or task mark were automatically added.

Does this autocompletion exist in VSCode? If so, how can I enable it?

Many thanks!

Many features from LaTeX editors would be great for people who will use markdown for fast markdown writing and note-taking.

• Autoclosing the dollar sign $..$ $$...$$

• Intellisense for begin environments

  \begin{...}
  # cursor here
  \end{...}
  

These features are apparent in VSCode (e.g., LaTeX-Workshop).

win10 64

1. testlink
2. click the testlink from MPE
3. Documents has been opened

Is there any way to access the features other than the keybinds? Thanks.

The extension can correctly render chart.js output but when I click on the markdown editing area the rendered chart just disappears. The situation is illustrated in the gif below

Then I switch to plotly.js, which does not have such a problem.
I wonder whether the extension support other JavaScript chart libraries other than plotly.js?

When I hit the button right, the following error occurred :Extended host unexpected termination