Jan 27, 2020

How to Take Coding Notes


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

Dosc Authoring Pack Extension

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.

Markdown File in Visual Studio Code

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

Visual Studio Code Preview

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

Include a Code Snippet

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.

Since I've been learning JavaScript and C# lately, I've been following the guidance above to help keep track of my code notes. I find myself referring back to the notes from time to time depending on what I'm doing in Unity. This really makes things easier for me because I can copy and paste code snippets from my notes to my scripts. I tend to place a lot of snippets in one Markdown file which happens to help me keep track of my snippets all in one place. Give it a try if you're looking for something new and let me know if you need any help!