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.
Edit me

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. Markdown language support for IntelliJ platform. WebStorm does not ship with Markdown support out of the box, but you can easily install the Markdown plugin.

About text editors and WebStorm

Feb 23, 2014 WebStorm是一个非常高效的开发工具,特别对于Web前端的开发。Markdown流行,因为其简化了HTML的语法,去掉了表单等复杂标签,以极简的语法只做网页展现。在WebStorem中编辑Markdown文档,是一种普遍的应用需求。 目录. Markdown介绍; 在WebStorem中安装Markdown插件; 解决. WebStorm 2020.3 EAP build #2 is now available! We encourage you to download it, try the latest enhancements, and share your feedback with us.

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.

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.

Webstorm Markdown

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)

Webstorm markdown problemsWebstorm Markdown

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.

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

Shortcuts

It can help to learn a few key shortcuts:

CommandShortcuts
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.

Webstorm Markdown To Pdf

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.

Webstorm Markdown Editor

Creating file templates

Webstorm Markdown Problems

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

Webstorm Markdown 无法 预览

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.