Code Monkey home page Code Monkey logo

vscode-md's Introduction

💡 Introduction

A full-featured markdown extension for vscode, powered by vditor and picgo.

✨ Features

  • Support three editing modes: WYSIWYG, Instant Rendering and Split View

  • Support outline, mathematical formulas, mind maps, charts, flowcharts, Gantt charts, timing charts, staffs, multimedia, voice reading, heading anchors, code highlighting and copying, graphviz rendering
  • Multi-language support, built-in Chinese, English, Korean text localization
  • Built-in security filtering, export, image lazy loading, task list, at, multi-platform preview, multi-theme switching, copy to WeChat function
  • The toolbar contains 30+ items of operations.
  • Emoji auto-complete.
  • You can use drag and drop to store your images, and then store them locally or upload to the server.
  • The markup HTML is automatically converted to Markdown.
  • Support character counting.
  • Multi-theme support.

🔧 Configurations

  • vscode-md.options.mode: Choose default edit mode
    • ir: Instant render mode
    • wysiwyg: What-you-see-is-what-you-get mode
    • sv: Traditional split view mode
  • vscode-md.options.lang: Localization, i18n
  • vscode-md.options.outline: Show outline of markdown
  • vscode-md.options.counter.enable: Whether to use counter
  • vscode-md.options.toolbarConfig.hide : Whether to hide the toolbar
  • vscode-md.options.toolbarConfig.pin: Whether to pin the toolbar
  • vscode-md.options.preview.hljs.lineNumber: Whether to enable line number
  • vscode-md.options.preview.math.engine: Choose mathematical formula rendering engine: KaTeX/MathJax
  • "vscode-md.options.preview.markdown.mark": Enable mark syntax
  • vscode-md.image.pathType: The markdown image path type, relative/absolute/picgo
  • vscode-md.image.dirPath: The directory used to store the pictures, it must be in workspace. The default is the path where Markdown is located
  • vscode-md.theme.global: Global theme
  • vscode-md.theme.content: Markdown content theme
  • vscode-md.theme.code: Code theme, see Chroma for more information
  • vscode-md.picgo.configPath: The path to your PicGo configuration.

📚 Documentation

📄 License

MIT

❤️ Thanks

vditor: An In-browser Markdown editor, support WYSIWYG, Instant Rendering (Typora-like) and Split View modes.

picgo: New Experience of Image Upload and Management

vscode-md's People

Contributors

dependabot[bot] avatar tobiastao 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

Watchers

 avatar  avatar  avatar

vscode-md's Issues

Image paste

Not sure if it's an issue, I'm trying to paste an image, or upload from local server,
Does your Extension support this?
I have tried using Markdown Paste which works when your extension is not enabled, but it cannot paste through the wysiwyg or in the split editor.
I don't have outside picture accounts, and I'm using the windows version of vscode on win10 all updated.

Thanks for any help you can give.

Add support for existing snippets and autocomplete extensions

Impressed by functionality and beautiful design! But it would be a lot nicer and easier to use to add support for snippets like thomanq.math-snippets or preferably goessner.mdmath, since they work within built-in editor when editing math formula but not the case for Markdown edit. Don't know if this is a bug.

Can not upload image through picgo in macOS

Thanks for such a good markdown extension in vscode, it's very comfortable for markdown editing.
But I don't know why I can not upload image, it's always loading as this gif shown.
iShot2021-12-14 14 07 59

I've set picgo config path, and picgo-core does work in Typora, I can upload image while editing local markdown file in Typora.

image

Here is my picgo-core version.
image

Thanks for any help you can give.

Search (and replace)

It would be great to be able to find (and replace) text in the markup editor, the shortcut Ctrl+F / Cmd+F is doing nothing, currently.

Enable spell checking

I really found a hidden gem here, I love this extension. I think the only thing it lacks is a way to spell check. It would be great to support Code Spell Checker, so there is no need to implement an own dictionary and spell check logic, but I'm not sure the extension provides an API, so I asked about that.

Allow to open links without preview

In the default editor of VSCode I can open links with holding down Ctrl / Cmd while clicking on a link. I miss such functionality in this editor. I can switch to preview mode to make my links clickable, but it adds a lot of extra steps for such a simple thing.

Mathjax rendering of \ref

Hi,

First, thank you for making this available to the community. It is amazing work!!

I use mathjax, and the rendering works very well for my needs. Except the \ref{} tag. If I write an equation

$$$
x = y + z
\tag{1} \label{1}
$$$

and then try to refer to it in the md like so: Equation $\ref{1}$ tells us that ..., it does not seem to work. The equation is rendered perfectly, but the text comes out as: Equation (???) tells us that .... Is this something that can be fixed ? If you are using mathjax-node, perhaps I can help resolving this.

Create a separate extension dedicated to image drag-and-drop?

Hi there,

the drag-and-drop feature provided by this extension is promising!

I can't get it to work and I'm afraid too much features are concentrated here.
I just want to drag and drop pictures!

Do you consider shipping this feature in a separate extension?
Thanks!

You are my hero!

Not an issue, I just had to tell you: I have been looking so long for a WYSIWYG markdown extension for vs code! You have single-handedly made me switch to vs code for all my note keeping needs!

Keep it up! And be sure to setup some donation links on PayPal, Flattr, Liberapay and so on

Not Working??

I have installed vscode-md but something must be wrong because I cannot see its toolbar with Toggle Edit Mode!?
I have access to vscode-md settings under the general settings, thus it must be installed correctly, but still it isn't working as in the demo animated picture.
Could you help me solve that issue?

无法显示图片

无法显示图片 (ctrl+v 方式插入的图片)
图片
图片

插件配置:
图片

如何插件这样配置:
图片

插入图片的时候就会一直卡在这个界面
图片

Exporting does not work

When creating a default markdown file and pressing on export as pdf or any other option you get the message that it is generating something
It doesn't actually generate anything tho.

Enable configuration of tabsize

In order to have compatibility to all of my tools I use a tabsize of 4 spaces. I have set this in VSCode.
The extension use a tabsize of 2 and it "overwrite" the setting from VSCode.

Would it be possible to integrate the possibility

  • to choose the tabsize or
  • to "use" the tabsize set in VSCode?

Support Workspace Trust

Hello 👋 I'm from the VS Code team.

Recently, we have been exploring a security feature we refer to as Workspace Trust. This feature is intended to centralize and unify a security conscious decision required by a variety of VS Code features. With workspace trust, the user will be able to declare whether or not they trust the folder that is opened in VS Code before these features are executed.

Why you should care

We want to make sure that those users have a delightful experience with workspace trust and that includes extension authors deciding how much of their extension is supported in an untrusted workspace. Custom editors are special in that if they cannot at least render in an untrusted state then they will be replaced by a lightweight message telling the user to enable trust. This means that users of your extension will not be able to see their editors and there may even be cases of data loss.

Custom Editors Untrusted

Workspace Trust experience

You can enable the feature with the following setting security.workspace.trust.enabled. Once enabled, you will see the following dialog when opening folders in VS Code.

Workspace Trust Startup Dialog

This dialog is important for allowing the user to make a decision early and understand the impact of their decision. Once you understand the feature, you may want to customize when to display the dialog using the setting security.workspace.trust.startupPrompt.

You can follow the development of Workspace Trust and provide feedback in issue #106488.

Workspace trust API

First off, all of what I am about to say can be found in issue #120251. That issue will include discussion of the feature and any updates to the feature.

The Workspace Trust extension API is now in stable. This allowed us to release the first cut of our guide for onboarding your extension to Workspace Trust. The API is small, so here is a quick look.

You can declare your extension to provide complete, partial or no support in untrusted workspaces using the untrustedWorkspaces capability in package.json.

The following example declares that the extension is supported completely in untrusted workspaces. In this case, the extension is enabled in untrusted workspaces.

"capabilities": {
  "untrustedWorkspaces": {
    "supported": true
  }
}

The next example declares that the extension is not supported in untrusted workspaces. In this case, the extension is disabled in untrusted workspaces.

"capabilities": {
  "untrustedWorkspaces": {
    "supported": false
  }
}

The third option is to declared limited support. There are three tools provided to you when you select the limited option.

First, if you have a setting that can be configured in the workspace but requires the workspace to be trusted in order to apply the workspace value, then you can include the setting using restrictedConfigurations array property in untrustedWorkspaces object. Doing so, VS Code will ignore the workspace value of these restricted settings when your extension reads these settings values using the VS Code Workspace Configuration API.

The following example declares the settings that are restricted in untrusted workspaces.

"capabilities": {
  "untrustedWorkspaces": {
    "supported": "limited",
    "restrictedConfigurations": [
      "markdown.styles"
    ]
  }
}

Next, you can also check and listen if the current workspace is trusted or not programmatically using the following API:

export namespace workspace {
  /**
   * When true, the user has explicitly trusted the contents of the workspace.
   */
  export const isTrusted: boolean;
  /**
   * Event that fires when the current workspace has been trusted.
   */
  export const onDidGrantWorkspaceTrust: Event<void>;
}

Lastly, you can hide commands or views declaratively with the isWorkspaceTrusted context key in your when clauses.

A far more detailed guide on how to onboard which will be updated as we receive feedback can be found in issue #120251.

Rollout plan

We are planning on enabling this by default in the near future (most likely next release). To prepare for that day, we want to work with you to allow your editor to work seamlessly alongside the trusted workspace experience

Our Asks

The main features that should work for custom editors in an untrusted folder is rendering, viewing, and saving (if applicable). After reviewing your codebase, I believe that your extension does certain things that can be dangerous if the folder contents are malicious (i.e. executing user files as code) therefore I believe that limited is the best option. This involves listening to the trust state changes and disabling certain features in the untrusted state.

Please let me know if you have any question or would like to meet up via voice chat as I would be happy to assist you in getting your extension ready for workspace trust!

Highlight files and folders in the explorer window when clicking on local links

Lets say I have a local link that points to a file:

[*myFile.json*](./myFile.json)

Or a local link that points to a folder:

[*myFolder/mySubFolder*](./myFolder/mySubFolder)

The default behavior of VSCode is to try to highlight the file in the file explorer. It would be nice if this editor extension would be able to do the same.

How to specify the markdown file default editor?

I am not used to the Markdown Edit provided by this plugin vscode all markdown.

If I want to use the built in Editor which is called Text Editor, I must right click the title of this file which is under editing, and select Reopen Editor with ... to switch to Text Editor.
图片

So if any way can I config the Text Editor which is built in as the default editor?
图片

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.