Code Monkey home page Code Monkey logo

vscode-markdown-editor's Introduction

Markdown Editor — A full-featured WYSIWYG editor for markdown

Demo

demo

Features

  • What You See Is What You Get (WYSIWYG)
  • Auto sync changes between the VSCode editor and webview
  • Copy markdown/html
  • Uploaded/pasted/drag-dropped images will be auto-saved to the assets folder
  • Multi-theme support
  • Shortcut keys
  • Multiple editting modes: instant Rendering mode (Recommand!) / WYSIWYG mode / split screen mode
  • Markdown extensions
  • Multiple graph support including KaTeX / Mermaid / Graphviz / ECharts / abc.js(notation) / ...
  • For more usage please see vditor

Install

https://marketplace.visualstudio.com/items?itemName=zaaack.markdown-editor

Supported syntax

demo article

Usage

1. Command mode in markdown file

  • open a markdown file
  • type cmd-shift-p to enter command mode
  • type markdown-editor: Open with markdown editor

2. Key bindings

  • open a markdown file
  • type ctrl+shift+alt+m for win or cmd+shift+alt+m for mac

3. Explorer Context menu

  • right click on markdown file
  • then click Open with markdown editor

4. Editor title context menu

  • right click on a opened markdown file's tab title
  • then click Open with markdown editor

Acknowledgement

Todo

License

MIT

Support

If you like this extension make sure to star the repo. I am always looking for new ideas and feedback. In addition, it is possible to donate via paypal.

vscode-markdown-editor's People

Contributors

kiliansinger avatar youngcatchen avatar zaaack avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

vscode-markdown-editor's Issues

ONLINE CONNECTION MANDATORY: Editor not opening

After installing the extension via *.vsix file the editor does not start.
(The editor stays just dark)

This happens on a computer that has no internet connection.
Is an internet connection mandatory? If so, why?

What's the difference from the UNOTES?

Sorry for this question, but i'd really like to get the difference as a user except for the different infrastructure.

ryanmcalister/unotes: Unotes Visual Studio Code Extension. A markdown WYSIWYG notes editor.

And i found another extension tejasvi/markless: WIP right now which satisfy all my need, looks like a intergreted vscode markdown renderer which still could use most of my other extensions' keybinds. Without changing my typing habits, I could immediately enjoy it.

Root directory and file extensions

In VSCode's built-in preview, each of these links works properly:

[Cybernetics1](/Cybernetics.md)

[Cybernetics2](Cybernetics.md)

[Cybernetics3](/Cybernetics)

[Cybernetics4](Cybernetics)

In vscode-markdown-editor only Cybernetics2 works.

I care most about the Cybernetics3 option, because that's what the working URLs look like, in wiki.js, which I use.
For that, Cybernetics1/2/4 is incorrect in wiki.js.

For images it is the same, but the URL must always have a file extension.

It would be good for vscode-markdown-editor to handle every case, just like the built-in VSCode preview.
Then my problem will be solved with redundancy. :)

Additionally: The URL should open in your editor, not in the regular VSCode text editor.

有没有办法触发vscode的代码提示功能

我现在用vscode写所有markdown笔记,主要就是馋它的snippet功能,尤其是在快速插入latex公式的时候,按快捷键触发提示以后可以按关键字自动补全公式结构,只需要按tab填数字就行了。

但是用这个编辑的话,似乎无法触发提示,开始我以为是它的快捷键Ctrl+iCtrl+Space有冲突,但是我改了别的也不行,然后意识到可能是需要触发内置编辑器的某个特定事件才行。

我查了一下,这个提示功能Trigger suggest的触发条件是editorHasCompletionItemProvider && textInputFocus && !editorReadonly,有没有办法在这个插件里面触发它?

add outline support

When opening in markdown-editor, the outline sidebar is disabled, showed "The active editor cannot provide outline information.".
Will you add this feature?
Thanks.

关于插件样式的问题

我觉得可以暴露vditor自定义样式的配置项,这样可以自定义解决一下vditor的主题与vscode样式不匹配带来的问题

How to open `*.md` files with markdown editor?

How to open *.md files with markdown editor?

VSCode has workbench.editorAssociations option.
I want set markdown editor to the option but I don't know setting value.

    "workbench.editorAssociations": {
        "*.md": "vscode.markdown.preview.editor"
    },

In this example, open it in preview by default.

Suggestion on default font size ; playing nice with dark theme

Two separate UI issues, but potential fixes are loosely related so I group them together.

  1. The default font size seems to be a bit too large.
  2. When Visual Studio Code is in a dark theme, the font color is not switched to light color.

image

For font size, it could be helpful if it can be specified by users. Another option is to obey Visual Studio Code's default size.


Suggested solution:

One way is to tweak the css:

/* fix font family */
.vditor .vditor-reset {
font-family: var(--vscode-editor-font-family)!important;
}

If we add the following to the css rule, it'll make the editor area use vscode' default color / font size (rather than the hardcode value in .vditor style)

    font-size: var(--vscode-font-size, var(--theme-font-size));
    color: var(--vscode-editor-foreground, var(--theme-foreground));    

With the css change, it looks like:

image

Document creating a custom theme

I'd like to change the font and font size that the editor uses, but it's not clear how to do that or if it's even possible.

It'd be great to have some documentation for this.

Scrollbar grabbing at the edge, in a maximized VSCode window

In maximized VSCode window mode, the scrollbar in vscode-markdown-editor has a problem.
Grabbing the scrollbar near the edge of the window, displays cursor selection, and does not allow the scrollbar to move.

Grabbing the edge does not work, grabbing the middle works:
vscode-markdown-editor_scrollbar

No outline displayed

image

The normal .md file has a nice outline displayed. It would be great if this extension could support that feature

Default the editor theme to match the user's VS Code color theme

Hey! I love this extension, so thanks so much for creating it 😄 If possible, it would be amazing if you could default the editor theme to use the dark theme, if the user were using a dark theme in VS Code. It seems like this setting is persisted across VS Code sessions, and so the workaround is to simply manually change the theme once. But if I'm working across multiple machines, and syncing my VS Code theme across them, it would be cool to have the markdown editor reflect that. Thanks!

[feature]主题自适应

现在背景色适配相较于office viewer来说已经很不错了,但是在light和dark两种模式切换时还得手动切换内置主题,比较麻烦。

希望可以单独配置两种模式下的主题,或是提供一个自动切换的选项以跟随vscode的主题模式来进行相应模式的切换。

Allow multiple documents opening

hello

Could be nice to allow multiple opening feature, when we want open more than one document, we get only one markdown document.
Others documents are opened with default editor or preview feature.

Thanks

[bug]ctrl+s保存失效问题

当光标在编辑区时,ctrl+s保存;然后关闭文档再打开,内容丢失;必须使用工具栏自带的保存功能才生效
版本:0.6.2

Cannot open link to relative path. AND how to open link with markdown editor

Thank you for fixing the broken link issue with version 0.1.8.

But there are still some problem/feature request with links.

  1. Opening link to a relative file path doesn't seem to be working. For example, when creating the link [test](test.md), clicking the link would cause a pop up to show:

Screen Shot 2021-06-05 at 10 07 07 AM

  1. Can you make it so that if a link to a markdown file is opened, it would default to open it using the markdown editor? This would be very useful for linking different markdown notes.

Table Row/Column Delete is Inconsistent

Table Column

  • delete column menu does nothing
  • delete column shortcut cmd - deletes ROW

Table Row

  • delete row menu deletes COLUMN
  • delete row shortcut shift cmd - zooms view (makes everything smaller)

Include a theme that prioritizes readability

Monospaced fonts are great for code because it keeps code looking consistent and organized. However, when it comes to normal text, monospaced fonts are harder to read and unnecessarily takes up more space.

It'd be great to be able to choose a theme that would use a non-geometric proportional sans-serif font.

插入本地绝对路径链接,点击却无法打开与跳转到对应位置

问题

我插入了一个本地绝对路径链接,示例如下:
\assets\help.pdf
结果点击它进入这个链接以后,却打开了我的浏览器,其链接如下:
https://file+.vscode-resource.vscode-webview.net/assets/help.pdf

需求

上述【本地绝对路径】是根本打不开的,但是 vscode 原来自带的 markdown 预览是可以在 vscode 中打开的,如果作者能够修正这个问题就太好了,这可以使得这个插件能记录很多笔记并能积极调用内部资源文件。

一个奇怪的Bug

我这里有一段带有公式的笔记,用Typora,vscode的MPE插件,还有放进思源笔记里面都可以正常解析,但是怎么在这个插件里面显示不正常:

Test
这类极限主要包括三种未定型 $i^\infty, \  \infty^0, \  0^0$. 其中第一种是重点,后两种很少考察。

共同解法——指数化:$f(x)^{g(x)}=e^{g(x)\ln f(x)}$. 
这样可以将以上几种未定型全部转换为 $0 \cdot \infty$ 未定型,然后结合其他方法使用。

对于 $1^\infty$ 有特殊解法 $e^A$. 如果底数部分提供了1,那么可以简单计算。

插件里面解析是这样的:
pic

可以看到,有三处没有将公式显示出来,最后一行居然跳过公式转而将中间的汉字当公式了。

我很疑惑,按说思源也是用的Veditor,可是在思源里面是可以正确显示的。我试过在插件的编辑器里重新手敲一边,当时看着都对了,然后重开又成了这样,很迷惑。

Language selection

Hi, I really like this extension which has been super useful to me. I was wondering if we could get the option to choose the language used by the extension ? More precisely when I make a table and I click on the table options for example, the options are explained in Chinese which I don't understand. Thanks for the extension anyway, works really well!!

Paste Image is using backslash instead of slash

When using Ctrl-V to paste in an image the following markdown code will be generated:

[](assets\20210623_162030_image.png)

Unfortunately the backslash will not be rendered correctly in Github.
How is it possible to have a slash instead of the backslash during the Paste in?

markdown引入图片带英文括号问题

你好,我在使用的过程中发现有些图片无法显示,但原生插件可以使用。后面分析文件名,发现是带了英文括号的缘故。
例:
![test.png](test(1).png)

How to open link?

How do I open a link in the markdown editor?

click and cmd + click doesn't quite work.

Add Rmarkdown support

RMarkdown (file extension .rmd) is currently not supported. These files have the same syntax as Markdown. You cannot edit these files currently. Could you also allow opening and editing these files?

image
This is the error it is currently giving.

Line breaks in table cells not rendering/glitching

Inserting a <br> element into a table cell does not display in the editor. It's a bit glitchy and ultimately doesn't display.
Ideally it would line break correctly. But as a smaller target I think not rendering it, but fixing the graphical glitches, is a viable solution.

can' t show image

code in source:

![open-file-dialog](images/open-file-dialog.png)

it is not show in markdown-editor (confirm image is existed)

Use it on VSCode Server

Hi,
how get this run on VSCode Server?
here I get only a blank window if I open a md-file.

Cheers

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.