Taking Markdown Notes with Visual Studio Code

There are numerous note-taking solutions on the web, and never-ending discussions comparing the pros/cons of them. One easily gets lost when searching for an ideal solution for themselves. You hate Evernote because it’s too bloated. But sometimes you don’t like little editors like Typora either, because they lack some features you want.

After spending days and nights looking for the right note-taking app for myself, I thought hard about what I really wanted.

And they turned out to be simple:

  • Safe and convenient, but don’t lock me in.
  • Full control of formatting. Most WYSIWYG editors are buggy and may mess up the Markdown source.

At last, I started taking notes with Visual Studio Code in commonly supported Markdown. By “commonly supported”, I mean it’s not something like “Polar Bear markup language“.

Microsoft has a very comprehensive article on Markdown editing with Visual Studio Code. Read it through and have a look at the plugins it recommends. In the end, you have a very comfortable Markdown editor, with file explorer pane, live split-pane preview, source code highlighting, to name just a few features.

Just choose a folder and start organizing your notes in whatever directory structure you like.

Synchronization

You can just put your notes folder into iCloud Drive and access it from any device that has logged in to the same iCloud account.

I set up a private repository on Github and pushed my notes into it. A nice byproduct is that I can read/edit my notes in a web browser without pulling down the repository.

Images

You’ll definitely miss the note-taking software when you want to paste an image into your note, but don’t worry, we can do that with plugins in vscode.

I’m using Paste Image which is highly customizable. Although its configurations are confusing, I managed to find a simple way of customizing it to my needs. I added these to my settings.json:

    "pasteImage.defaultName": "Y/MM/Y-MM-DD-HH-mm-ss",
    "pasteImage.path": "${projectRoot}/images"

Basically this is to save all pasted images into images subdirectory in your notes’ root folder. The images are further organized into subdirectories according to the year and month of its date, to avoid too many files in a single directory.

With that in place, take a screenshot with Cmd+Ctrl+Shift+4. Place your cursor where you want to insert the screenshot and then press Ctrl+Alt+V. The image should show up in the preview, and it’s already stored in the expected location. Push the images together with notes and you can also see the images showing up when reading notes on github.com.

Resizing Images

To keep the image files at a reasonable size, I wrote a simple git pre-commit hook (ImageMagick is a prerequisite) to resize the images as necessary when doing a commit:

#!/bin/sh -e

MAX_WIDTH=720
MAX_HEIGHT=1000

echo "- Checking image sizes -"

for f in `git diff --name-only --cached | egrep '^images.*\.(png|jpg|jpeg|gif)$'`
do
  dim_info=`convert $f -ping -format "w=%w;h=%h" info:`
  eval $dim_info
  if [[ $w -gt $MAX_WIDTH || $h -gt $MAX_HEIGHT || $f == *".png" ]]
  then
    echo "$f (${w}x${h}) is png or larger than ${MAX_WIDTH}x${MAX_HEIGHT}. Unstaging..."

    # Unstage
    git reset HEAD $f

    # Backup the original file
    bak_path=.backup/`dirname $f`
    mkdir -p $bak_path
    mv $f $bak_path
    if [[ $f == *".png" ]]
    then
      # pngquant can greatly reduce file size
      convert $bak_path/`basename $f` -resize ${MAX_WIDTH}x${MAX_HEIGHT}\> png:- | pngquant - > $f
    else
      convert $bak_path/`basename $f` -resize ${MAX_WIDTH}x${MAX_HEIGHT}\> $f
    fi

    git add $f
    echo "$f is resized and restaged."
  fi
done

echo "- Done checking image sizes -"

Prerequisites:

  • ImageMagick – convert command.
  • pngquant – it greatly reduces PNG file size, and human eyes can’t decern the quality difference.

It goes through all the images to be committed, and if anyone has a width greater than 720 or height greater than 1000, it’s scaled down. The original image is saved in .backup. Remember to add this folder in your .gitignore.

That’s it. Actually I started doing this very recently. I’ll see if it really works for me.

Leave a Reply

Your email address will not be published. Required fields are marked *

Prove your intelligence before hitting * Time limit is exhausted. Please reload CAPTCHA.