Hushmark

日本語の README（GitHub）

A live preview Markdown editor for VS Code that shows Markdown syntax only for the element under your cursor. You edit the document as plain Markdown text.

Line-level syntax, such as headings and blockquotes, is shown on the line with the cursor. Inline syntax, such as code, emphasis, and links, is shown only while the cursor touches that element. All other syntax is hidden and the text is styled.

Features

• Headings, blockquotes, lists, and code keep their text in place whether their syntax is shown or hidden. The hidden syntax keeps its width, and the # of a heading is shown in the left margin. Emphasis and link syntax is hidden together with its width, because the remaining space would look like extra blanks. As a result, text after it on the same line moves only when the cursor enters that element.
• Letter spacing and line spacing follow the source. To keep the columns of a monospaced font aligned, the font size and side margins do not change per element. Only headings can use a larger font, and even then their height is a whole multiple of a body line.
• Vertical positions match the source lines. No space is added above or below blocks; the blank lines and ``` lines of the source become the space. A table header takes two lines (the header and the delimiter row), and each data row takes one line.
• Backgrounds and rules start at one left edge. Lines without leading spaces start slightly inside that edge, and lines with leading spaces start at least one character further in, so you can see whether a line is indented.
• Choose the look by combining a style (rules, backgrounds, rounded corners, and so on) with a color. The colors of each element are derived from the chosen color, and text meets readability contrast requirements against its background.
• The level of a heading is shown by a mark in the left margin, regardless of the font size.
• Emphasis works in Chinese, Japanese, and Korean text. Under the CommonMark rules, **注意（readme.md 参照）。**の件 and は**「重要」**です are not emphasized, because the inside of the delimiter is punctuation and the outside is a CJK character. Like markdown-cjk-friendly, Hushmark emphasizes them when the outside is a CJK character. When the inside is CJK punctuation, it also emphasizes them when the outside is a digit or a Latin letter (**重要。**2つ目). The same applies to * and ~~.
• The document is never converted to another format, so saving keeps your Markdown formatting (list markers, spaces, and line endings) as written. Undo (Ctrl+Z) and redo (Ctrl+Y / Ctrl+Shift+Z) work as usual.
• Edits made in another editor (a split view or the text editor) do not corrupt the document even when they overlap with typing in this editor. When both change the same place at the same time, the characters typed in this editor are discarded and the view is updated to match the document.
• When another tool changes the file, the view is updated. If there are unsaved changes, the file is not reloaded and a notification appears instead; choose "Revert File" in the notification to discard the unsaved changes and load the file.
• Documents that cannot be written (such as an older version from git) cannot be edited. As in VS Code, a file that is read-only because of its file permissions is treated as read-only only when files.readonlyFromPermissions is enabled. files.readonlyInclude and files.readonlyExclude are also respected.
• The cursor and scroll positions are restored when you reload the window or restart VS Code.
• The UI is shown in English or Japanese, following the VS Code display language.
• Works in VS Code for the Web (vscode.dev and github.dev).

Installation

Install it from the Visual Studio Marketplace or Open VSX.

Usage

• Open a Markdown file with "Open in Live Editor" in the editor title bar or in the Explorer context menu.

• To go back to the text editor, use "Open in Text Editor" in the editor title bar.

• To always open Markdown files in this editor, add the following to your settings:

  "workbench.editorAssociations": { "*.md": "hushmark.editor" }
  

Display and editing

The following VS Code editor settings (their values for Markdown) are respected. To apply them only to Markdown, put them inside "[markdown]": { ... }. Changes take effect immediately.

The keyboard shortcuts are the same as in the VS Code editor. Elsewhere in this README, keys are written for Windows and Linux. On macOS, read Ctrl as Cmd and Alt as Option unless noted otherwise.

The same keys work while you edit a table cell.

Find

As with the find widget of the VS Code editor, it appears in the upper right.

Matches inside a table are shown by highlighting the cells that contain them.

When you open a result of Search (Ctrl+Shift+F) with a double-click or Enter, this editor receives focus, but the cursor does not move to the match, because VS Code does not pass the position to custom editors.

Editing tables

Tables are shown as tables, and only the cell you click is edited as source. Inside a cell, bold and link syntax is shown only while the cursor touches it, and long content wraps at the cell width. Column widths are fixed at their width just before editing starts and are recalculated when you leave the cell.

When you hover over a table, the following buttons appear in its upper right.

• "+ Row" and "+ Column": add a row or a column
• "Source": shows the whole table as Markdown source. It returns to the table view when the cursor leaves the table. Change alignment (:--:) or delete rows and columns here

Settings

Choose the look with two settings: the preview style and the color. Any combination works.

Setting changes take effect immediately.

With a VS Code high contrast theme, the colors of the VS Code theme are always used, regardless of these settings.

Overriding individual colors

Write the colors to change in hushmark.colorCustomizations. As with VS Code's workbench.colorCustomizations, colors written inside "[color name]" are used only while that color (hushmark.previewColor) is selected.

"hushmark.colorCustomizations": {
  "link": "#3366cc",
  "[sepia]": {
    "blockBackground": "#f0e6d2"
  }
}

The following colors can be changed.

Uninstalling

Installing the extension creates the following.

Run the following command, and remove "*.md": "hushmark.editor" from workbench.editorAssociations and any hushmark.* settings from your user settings.

code --uninstall-extension vanpeiyu.hushmark

Known limitations

• On a line whose syntax is hidden, clicking at a boundary such as the end of bold text places the cursor outside the syntax. After the syntax appears, click again to place the cursor where you want.
• No space is added above or below headings. Add blank lines to the source if you want space.
• Images are not rendered in the document (they are shown only on hover). Mermaid diagrams and math are not rendered; they are shown as source.
• The undo history belongs to this editor only. Edits made in the other side of a split view or in the text editor cannot be undone with Ctrl+Z in this editor.
• In very long documents or large tables, typing and cursor movement may become slow.

License

MIT License (see LICENSE).

The .vsix bundles packages such as CodeMirror. Their license texts are in media/dist/THIRD_PARTY_LICENSES.txt inside the .vsix (generated at build time).