Webstorm Markdown

You can use a variety of text editors when working with a Jekyll project. WebStorm from IntelliJ offers a lot of project-specific features, such as find and replace, that make it ideal for working with tech comm projects.
  1. Webstorm Markdown Link
  2. Webstorm Markdown Editor
  3. Webstorm Markdown 无法 预览
  4. Webstorm Markdown Code

StackEdit can sync your files with Google Drive, Dropbox and GitHub. It can also publish them as blog posts to Blogger, WordPress and Zendesk. You can choose whether to upload in Markdown format, HTML, or to format the output using the Handlebars template engine.

Edit me

About text editors and WebStorm

There are a variety of text editors available, but I like WebStorm the best because it groups files into projects, which makes it easy to find all instances of a text string, to do find and replace operations across the project, and more.

If you decide to use WebStorm, here are a few tips on configuring the editor.

  • The Best Markdown Editor Available Today. Getting Started with Testing JavaScript in WebStorm.
  • Markdown editing and preview enhancements. With WebStorm 2020.3, we’ve significantly improved the experience of working with.md files. You can now reformat the content of your.md files to be in line with popular Markdown style guides. To do so, press ⌘⌥L / Ctrl+Alt+L.
  • Mar 30, 2021 Provides the capability to edit Markdown files within the IDE and see the rendered HTML in a live preview. Includes the following features: Document structure view, headers folding, highlighting, TODOs. Code completion and navigation for links to project files. Embedding fenced code blocks for different languages.

Remove unnecessary plugins

By default, WebStorm comes packaged with a lot more functionality than you probably need. You can lighten the editor by removing some of the plugins. Go to WebStorm > Preferences > Plugins and clear the check boxes of plugins you don’t need.

Set default tab indent to 3 spaces instead of 4

You can set the way the tab works, and whether it uses spaces or a tab character. For details, see Code Style. JavaScript in WebStorm’s help.

On a Mac, go to WebStorm > Preferences > Editor > Code Style > Other File Types. Don’t select the “Use tab character” check box. Set 4 for the Tab size and Indent check boxes.

On Windows, go to File > Settings > Editor > Code Style > Other File Types to access the same menu.

Add the Markdown Support plugin

Since you’ll be writing in Markdown, having color coding and other support for Markdown is important. Install the Markdown Support plugin by going to WebStorm > Preferences > Plugins and clicking Install JetBrains Plugin. Search for Markdown Support. You can also implement the Markdown Navigator plugin.

Enable Soft Wraps (word wrapping)

Most likely you’ll want to enable soft wraps, which wraps lines rather than extending them out forever and requiring you to scroll horizontally to see the text. To enable softwrapping, go to WebStorm > Preferences > Editor > General and see the Soft Wraps section. Select the Use soft wraps in editor check box.

Exclude a directory

When you’re searching for content, you don’t want to edit any file that appears in the _site directory. You can exclude a directory from Webstorm by right-clicking the directory and choosing Mark Directory As and then selecting Excluded.

Set tabs to 4 spaces

You can set the default number of spaces a tab sets, including whether Webstorm uses a tab character or spaces. You want spaces, and you want to set this to default number of spaces to 4. Note that this is due to the way Kramdown handles the continuation of lists.

Samsung s7 edge battery. To set the indentation, see the “Tabs and Indents” topic in this Code Style. Javascript topic in Webstorm’s help.


Webstorm markdown

It can help to learn a few key shortcuts:

Shift + ShiftAllows you to find a file by searching for its name.
Shift + Command + FFind in whole project. (WebStorm uses the term “Find in path”.)
Shift + Command + RReplace in whole project. (Again, WebStorm calls it “Replace in path.”)
Command + FFind on page
Shift + RReplace on page
Right-click > Add to FavoritesAllows you to add files to a Favorites section, which expands below the list of files in the project pane.
Shift + tabApplies outdenting (opposite of tabbing)
Shift + Function + F6Rename a file
Command + DeleteDelete a file
Command + 2Show Favorites pane
Shift + Option + FAdd to Favorites
Tip: If these shortcut keys aren't working for you, make sure you have the 'Max OS X 10.5+' keymap selected. Go to WebStorm > Preferences > Keymap and select it there.

Finding files


When I want to find a file, I browse to the file in the preview site and copy the page name in the URL. Then in Webstorm I press Shift twice and paste in the file name. The search feature automatically highlights the file I want, and I press Enter.

Identifying changed files

When you have the Git and Github integration, changed files appear in blue. This lets you know what needs to be committed to your repository.

Creating file templates

Rather than insert the frontmatter by hand each time, it’s much faster to simply create a Jekyll template. To create a Jekyll template in WebStorm:

  1. Right-click a file in the list of project files, and select New > Edit File Templates.

    If you don’t see the Edit File Templates option, you may need to create a file template first. Go to File > Default Settings > Editor > File and Code Templates. Create a new file template with an md extension, and then close and restart WebStorm. Then repeat this step and you will see the File Templates option appear in the right context menu.

  2. In the upper-left corner of the dialog box that appears, click the + button to create a new template.
  3. Name it something like Jekyll page. Insert the frontmatter you want, and save it.

    To use the Jekyll template, when you create a new file in your WebStorm project, you can select your Jekyll file template.

Disable pair quotes

By default, each time you type ', WebStorm will pair the quote (creating two quotes). You can disable this by going to WebStorm > Preferences > Editor > Smartkeys. Clear the Insert pair quotes check box.

JavaScript & TypeScript

ML-assisted code completion

Completion suggestions in your JavaScript and TypeScript files will now be sorted using machine-learning algorithms. Read this blog post to learn more.

Better completion suggestions for symbol names

WebStorm will now consider file names when showing you completion suggestions for top-level variables as well as for function and class names.

Improved JSDoc syntax highlighting

To make JSDoc comments more readable, we’ve implemented new options for tweaking the color scheme of JSDoc tag values and types. You can find them in Preferences / Settings Editor Color Scheme JavaScript / TypeScript.

Suppressing inspections for files

WebStorm allows you to turn off individual inspections for your entire project or on a more granular level – for example, for a statement or a class. With v2021.1, you can also disable them on a file-by-file basis.

Frameworks & Technologies

Built-in remote collaborative development service

WebStorm is now shipped with Code With Me, our new service for remote collaborative development and pair programming. You can use it to code together in real time and talk to others from the IDE.

Support for CSS modules in Vue

Starting from v2021.1, WebStorm will support CSS modules used in .vue files. The IDE will resolve $style properties correctly, providing code completion, navigation, and basic refactoring capabilities for them.

Enhancements for the HTTP client

Working with the built-in HTTP client is now more convenient. You can collapse the returned output using a new icon, quickly scroll to the top or the bottom of the response, find and replace usages of the http:// protocol in a few clicks, and more.

Webstorm Markdown

Configurable scope for ESLint

If you have ESLint set up for files like .md or .coffee, you can now see the errors reported by it in the editor. For this, add those file types to a new Run for files field.

Support for JSON Lines

WebStorm now supports the JSON Lines text format. The IDE will recognize the .jsonl, .jslines, .ldjson, and .ndjson file types.


Improved support for Stylelint

Fix your CSS code with Stylelint in just a few clicks. Hover over a problem in your file or place the caret on it and press Alt+Enter, then select Stylelint: Fix current file.

Additionally, you can now specify a path to the configuration file under the corresponding field in Preferences / Settings Languages & Frameworks Style Sheets Stylelint.

Built-in HTML preview

You can now preview static HTML files right in WebStorm! The changes you make to an HTML file or the linked CSS and JavaScript files will be saved, with the preview reloaded automatically so you can see the changes.

Selector specificity for CSS


When working with style sheets, you can now check the specificity of your selectors – just hover over a selector that you want to check. Alternatively, focus on a selector and press Ctrl+Q to see this information in the Documentation popup.

User Interface

Adjustable font weight

You can now choose between different variations of the editor font you’re using, be it light, regular, or bold. You can adjust the new options under Typography Settings in Preferences / Settings Editor Fonts.

Maximize tabs in the split view

Have several tabs open in the split view? Double-click the tab you’re working with to maximize the editor window for it. To bring that tab back to its original size, double-click it again.

More helpful quick documentation

MDN documentation is now bundled with WebStorm. This will help prevent connectivity issues with the MDN website and make in-editor documentation show up faster. It’s now also more informative – for example, you’ll see details about supported browser versions for JavaScript APIs.

Better accessibility

If you use high contrast mode on Windows, WebStorm will sync with the OS and apply the high-contrast theme on the first launch. Plus, more UI elements are now read out correctly when you use a screen reader.

Quick access to recent projects on Windows

We’ve improved the support for Windows jump lists and made it possible to open your recent projects by right-clicking on the WebStorm icon on the taskbar or on the Start menu.

Fixes for many issues

This release was mainly focused on improving the quality of WebStorm. We’ve fixed a lot of known issues, including the one involving file-name case sensitivity when working with different file systems.

Version Control

Improved work with pull requests

We’ve added several enhancements that will help you work with pull requests more efficiently. For example, you can now create a new PR right from the Pull Requests tool window by clicking the + icon.

Webstorm Markdown Editor

Support for commit message templates

WebStorm now supports Git commit message templates, which you can use to remind yourself of what needs to be included in a message. When you define such a template, the IDE will show its text as an initial commit message.

Webstorm Markdown 无法 预览

New action for saving to Shelf

Webstorm Markdown Code

You can now use a new Save to Shelf action to copy your changes to Shelf while keeping them in the local changes. To try it out, press Ctrl+Shift+A and type Save to Shelf.