shd101wyy / vscode-markdown-preview-enhanced Goto Github PK
View Code? Open in Web Editor NEWOne of the "BEST" markdown preview extensions for Visual Studio Code
Home Page: https://shd101wyy.github.io/markdown-preview-enhanced
License: Other
One of the "BEST" markdown preview extensions for Visual Studio Code
Home Page: https://shd101wyy.github.io/markdown-preview-enhanced
License: Other
To reproduce :
Atom: 1.24.0-beta2 x64
Electron: 1.6.15
OS: Microsoft Windows 7 Enterprise
Thrown From: markdown-preview-enhanced package 0.15.1
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)
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
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.
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 |
汇报两个问题
```puml
@startuml
title 性能測定機能ユースケース図
left to right direction
actor 保守
usecase 性能測定機能を実行する
usecase 性能測定結果を確認する
usecase 性能測定結果を比較する
'relationship'
保守 --> 性能測定機能を実行する
保守 --> 性能測定結果を確認する
保守 --> 性能測定結果を比較する
@enduml
```
```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
```
Is there any way to access the features other than the keybinds? Thanks.
Unable to open '': Invalid file resource (file://c:\users\milen.markdown-preview-enhanced\mermaid_config.js).
Close
Error
example:
<!-- 123
#123
123
-->
难道这个插件没有vscode里面的配置项供用户定制吗?
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.
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
.
PS: should the figure be aligned centered by default?
Many thanks.
1、在预览区上下滚动的时候,编辑区会同步滚动
2、但是,在编辑器鼠标或触摸板上下滚动的时候,预览区不会同步滚动。
3、如果在编辑区移动光标到文档某个位置,预览区会同步到相应的位置。
所以现在的问题是,在编辑区上下滚动浏览的时候,预览区不会同步滚动。不知道这是就这样设计的,还是哪儿出问题了???
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
}
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:
depthFrom
and depthTo
values.The only work-around I've found is to reload Atom.
Let me know if you need any other detail
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
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.
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 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?
如题,今天自动升级到1.14后发现设定被初始化了
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̲
VS Code 中使用。
看到快捷键是 F,但是按了没反应。
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
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!
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)
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.
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.
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
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>
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).
Not work 'Customize css' after migrating core library to Mume.
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 [
)
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 中的 MPE 插件都出现了插入本地图片无法显示的情况,用编辑器自带的 markdown 预览就可以正常看到图片。
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!
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.
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.
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:
OS: Win10
IDE: vscode
Converter from .md to .pdf: phantomJS
你好,我是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.
在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
命令成功安装过了。
现在公式比文字稍微大一点,想要调成一样大的该怎么做?
窗口的拉伸会改变图形的长宽比例
窗口的拉伸不改变图形的长宽比例
个人还是希望能维持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
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}
.
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?
win10 64
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.