Getting Started with VSCode and Markdown Step-By-Step Markdown-Preview-Scroll


Thought Leadership & Events

Markdown Preview

VS Code supports Markdown files out of the box. You just start writing Markdown text, save the file with the .md (.html works too) extension and then you can toggle the visualization of the editor between the code and the preview of the Markdown file; obviously, you can also open an existing Markdown file and start working with it. To switch between views, press, Ctrl+Shift+V [Ctrl]+[Shift]+[V] in the editor. You can view the preview side-by-side “Ctrl+K V” (Windows, Linux) ⌘K V (OSX) with the file you are editing and see changes reflected in real-time as you edit.

Tip: You can also right-click on the editor Tab and select Open Preview or use the Command Palette (⇧⌘P (Windows, Linux Ctrl+Shift+P)) Markdown: Open Preview and Markdown: Open Preview to the Side commands.

[F1] or [Ctrl+Shift+P] – Show Command Palette (enables you to type in extended commands including turning feature on or off)

  • Markdown: Open Preview
  • Markdown: Open Preview to the Side
  • Markdown: Show Source

Editor and Preview Syncronization

When working with a Markdown preview to the side of your editor, VSCode can syncronize the view of the editor and the preview. By default, the Markdown preview will automatically scroll to reveal the element at the selected line in the editor.

The currently selected line is indicated in the Markdown preview by a light gray bar in the left margin.

Also, when the Markdown preview is scrolled, the editor will scroll along with it. Scroll does not work with .html but it does for .md

Source: Markdown and VS Code

Keyboard Shortcuts Reference

We also have a printable version of these keyboard shortcuts. Help > Keyboard Shortcut Reference displays a condensed PDF version suitable for printing as an easy reference. You can also access if from Visual Studio Code Keyboard Shortcuts.pdf

Below are links to the three platform-specific versions:

Basic Editing

Note: The following keys are rendered assuming a standard US keyboard layout. If you use a different keyboard layout, please read. [F1] or [Ctrl]+[Shift]+[P] – Show Command Palette (enables you to type in Command

Key Command Command id
⌘X (Windows, Linux Ctrl+X) Cut line (empty selection) editor.action.clipboardCutAction
⌘C (Windows, Linux Ctrl+C) Copy line (empty selection) editor.action.clipboardCopyAction
⇧⌘K (Windows, Linux Ctrl+Shift+K) Delete Line editor.action.deleteLines
⌘Enter (Windows, Linux Ctrl+Enter) Insert Line Below editor.action.insertLineAfter
⇧⌘Enter (Windows, Linux Ctrl+Shift+Enter) Insert Line Above editor.action.insertLineBefore
⌥↓ (Windows, Linux Alt+Down) Move Line Down editor.action.moveLinesDownAction
⌥↑ (Windows, Linux Alt+Up) Move Line Up editor.action.moveLinesUpAction
⇧⌥↓ (Windows Shift+Alt+Down, Linux Ctrl+Shift+Alt+Down) Copy Line Down editor.action.copyLinesDownAction
⇧⌥↑ (Windows Shift+Alt+Up, Linux Ctrl+Shift+Alt+Up) Copy Line Up editor.action.copyLinesUpAction
⌘D (Windows, Linux Ctrl+D) Add Selection To Next Find Match editor.action.addSelectionToNextFindMatch
⌘K ⌘D (Windows, Linux Ctrl+K Ctrl+D) Move Last Selection To Next Find Match editor.action.moveSelectionToNextFindMatch
⌘U (Windows, Linux Ctrl+U) Undo last cursor operation cursorUndo
⇧⌥I (Windows, Linux Shift+Alt+I) Insert cursor at end of each line selected editor.action.insertCursorAtEndOfEachLineSelected
⇧⌘L (Windows, Linux Ctrl+Shift+L) Select all occurrences of current selection editor.action.selectHighlights
⌘F2 (Windows, Linux Ctrl+F2) Select all occurrences of current word editor.action.changeAll
⌘I (Windows, Linux Ctrl+I) Select current line expandLineSelection
⌥⌘↓ (Windows Ctrl+Alt+Down, Linux Shift+Alt+Down) Insert Cursor Below editor.action.insertCursorBelow
⌥⌘↑ (Windows Ctrl+Alt+Up, Linux Shift+Alt+Up) Insert Cursor Above editor.action.insertCursorAbove
⇧⌘\ (Windows, Linux Ctrl+Shift+\) Jump to matching bracket editor.action.jumpToBracket
⌘] (Windows, Linux Ctrl+]) Indent Line editor.action.indentLines
⌘[ (Windows, Linux Ctrl+[) Outdent Line editor.action.outdentLines
Home Go to Beginning of Line cursorHome
End Go to End of Line cursorEnd
⌘↓ (Windows, Linux Ctrl+End) Go to End of File cursorBottom
⌘↑ (Windows, Linux Ctrl+Home) Go to Beginning of File cursorTop
⌃PageDown (Windows, Linux Ctrl+Down) Scroll Line Down scrollLineDown
⌃PageUp (Windows, Linux Ctrl+Up) Scroll Line Up scrollLineUp
⌘PageDown (Windows, Linux Alt+PageDown) Scroll Page Down scrollPageDown
⌘PageUp (Windows, Linux Alt+PageUp) Scroll Page Up scrollPageUp
⌥⌘[ (Windows, Linux Ctrl+Shift+[) Fold (collapse) region editor.fold
⌥⌘] (Windows, Linux Ctrl+Shift+]) Unfold (uncollapse) region editor.unfold
⌘K ⌘[ (Windows, Linux Ctrl+K Ctrl+[) Fold (collapse) all subregions editor.foldRecursively
⌘K ⌘] (Windows, Linux Ctrl+K Ctrl+]) Unfold (uncollapse) all subregions editor.unfoldRecursively
⌘K ⌘0 (Windows, Linux Ctrl+K Ctrl+0) Fold (collapse) all regions editor.foldAll
⌘K ⌘J (Windows, Linux Ctrl+K Ctrl+J) Unfold (uncollapse) all regions editor.unfoldAll
⌘K ⌘C (Windows, Linux Ctrl+K Ctrl+C) Add Line Comment editor.action.addCommentLine
⌘K ⌘U (Windows, Linux Ctrl+K Ctrl+U) Remove Line Comment editor.action.removeCommentLine
⌘/ (Windows, Linux Ctrl+/) Toggle Line Comment editor.action.commentLine
⇧⌥A (Windows Shift+Alt+A, Linux Ctrl+Shift+A) Toggle Block Comment editor.action.blockComment
⌘F (Windows, Linux Ctrl+F) Find actions.find
⌥⌘F (Windows, Linux Ctrl+H) Replace editor.action.startFindReplaceAction
⌘G (Windows, Linux F3) Find Next editor.action.nextMatchFindAction
⇧⌘G (Windows, Linux Shift+F3) Find Previous editor.action.previousMatchFindAction
⌥Enter (Windows, Linux Alt+Enter) Select All Occurrences of Find Match editor.action.selectAllMatches
⌥⌘C (Windows, Linux Alt+C) Toggle Find Case Sensitive toggleFindCaseSensitive
⌥⌘R (Windows, Linux Alt+R) Toggle Find Regex toggleFindRegex
⌥⌘W (Windows, Linux Alt+W) Toggle Find Whole Word toggleFindWholeWord
⌃⇧M (Windows, Linux Ctrl+M) Toggle Use of Tab Key for Setting Focus editor.action.toggleTabFocusMode
Toggle Render Whitespace toggleRenderWhitespace
⌥Z (Windows, Linux Alt+Z) Toggle Word Wrap editor.action.toggleWordWrap

Source:Key Bindings for Visual Studio Code.