hen I first starting learning how to code, I kept a notebook in which I wrote down everything I learned. I then found myself spending more time writing syntax than actually learning how to code. I later upgraded to typing my notes in OneNote. That made things a tad more efficient, however, I wasn't able to maintain indentations nor syntax highlighting. So, I opted for something more familiar - Visual Studio Code!
Why re-invent the wheel and force myself to include syntax highlighting and indentations when there's an entire tool that exists which already does that? I now type my notes in Markdown files and include code snippets alongside my notes. Check out below how I take notes with Visual Studio Code.
Download Visual Studio Code
You can download Visual Studio Code directly from the website. Be sure to install the one that's best for your computer.
Install the Docs Authoring Pack
The primary reason I use Visual Studio Code is because I'm able to use the Docs Authoring Pack. It's an extension that helps people contribute to documentation on docs.microsoft.com. I discovered the extension while working on Docs (my former team at Microsoft). Fortunately, I've since fallen in love with the extension because it helps you type in Markdown.
After you install Visual Studio Code, you can use the extension manager to search for the Docs Authoring Pack and install. If you're new to Visual Studio Code, you can find the extension manager by clicking the extension icon (left tool bar - it looks like 4 squares).
Create a Folder
Back on your desktop, create a new folder (wherever you'd like). You'll now need to open the folder in Visual Studio Code to access the folder. In Visual Studio Code, click File > Open. This will open the folder in Visual Studio Code and display any folders and/or files that exist in that folder.
Create a Markdown File
In the left navigation under the folder that you just opened, click the New File icon (it looks like a plus sign with a sheet of paper). Give the file a new name and include the .md extension at the end. This will create a new markdown file inside the folder. The file will open in Visual Studio Code with a blank screen. It's important to include the .md extension to ensure that Visual Studio Code knows that you'll be typing in Markdown.
Open Side by Side Preview
Visual Studio Code includes a preview for you to see how your file looks. To make things easier, you can also preview the file side by side the file in which you're typing. Feel free to close any tabs that are open in which you won't need. You can also collapse the left menu by clicking the Explorer icon.
At the top of the screen, click the Open Preview to the Side icon. Visual Studio Code will open a new window to the right of your file. The background of the page should be white. Type some words onto the original file (on the left) and notice how they appear in the preview window (on the right).
Structure the File
If you're unfamiliar with Markdown, consider reviewing the basic syntax. I tend to stick with the following:
- H1 - #
- H2 - ##
- H3 - ###
- Bold - **Bold**
- Italic - _italic_
- Inline Code - `name = April`
Add Code Snippets
To include code snippets, use the triple tick syntax and include your language of choice. In the example below, I included a Python snippet. First, I use ```python on the first line. Then in the middle, I drop in the actual code snippet. Finally, on the final line after the code snippet, I include another set of triple ticks ```.
Make sure you're using ` and not '. The former is at the top left of your keyboard paired with the tilde. The latter is a single quote.