DevMountain

Code-friendly Notetaking in Sublime 2

During my time at DevMountain, a couple of students knew they were going to miss a class and asked me to send copies of my notes [1, 2]. My notes’ files subsequently raised a fair number of questions and it became clear that other DevMountain students might appreciate knowing how to take notes in Sublime using Markdown.

Innovation comes only from readily and seamlessly sharing information rather than hoarding it.

Tom Peters

Set Up Sublime

I figured most of this out from http://www.macstories.net/roundups/sublime-text-2-and-markdown-tips-tricks-and-links/. That article was at a high level, so there was way more detail than I really wanted to wade through. I’m also pretty sure there were several steps that turned out to be unnecessary. I believe you can get the same effect with just the following:

  1. Install the Sublime Package Control packet manager. Literally open the link, click the “Install Now” button.

    1. Navigate to https://sublime.wbond.net/installation#st2
    2. Copy the appropriate code to your clipboard
    3. In Sublime, ctrl-` (note that is a backtick not a single quote; this opens Sublime’s console)
    4. Paste the clipboard into the console that appears and press ‘return’
    5. Restart Sublime

  2. Add the Markdown Preview Plugin [3]:

    1. cmd+shift+P
    2. Package Control: Install Package
    3. Markdown Preview

  3. Add the Markdown Preview Plugin [4]:

    1. cmd+shift+P
    2. Package Control: Install Package
    3. LiveReload

  4. Set Sublime up to display code highlighting [5, 6, 7]

    1. Ensure a highlighting-friendly Color scheme is being used [8] (e.g. Twigligth, idleFingers, Cobalt): Sublime Text 2 > Preferences > Color Scheme > desired scheme
    2. In Preferences > Package settings > Markdown preview > Settings - Default, set enable_highlight to true.

  5. Restart Sublime

Create a Markdown File

Setting up Sublime is a one-time process. Ensuring the file is recognized as a markdown file is a one-time per file process (but I promise, it’s a super-duper easy process!)

  1. Create the markdown document. Feel free to use the following to make sure you have everything set up correctly (and please feel free to copy-n-paste): 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
# Orientation & Git Workflow
## 2014-09-16 (Tues) Command Line and Git
### Command Line commands
 * is case-sensitive
 * `pwd          // present working directory`
 * `cd 'dirName' // change directory to the named sub-directory`
 * `cd ..        // change directory up one level`
 * `cd ../../    // change directory up two levels`
 * `cd ~         // change to home directory`
 * `cd /         // change to root`
 * `ls           // list  ()`
 * `ls -lah      // `
 * `history      // shows past commands` 
 * `!'number'    // repeat command numbered 'number' in history`
 * `history | grep 'search_phrase'  // search history for commands with the specified search phrase`
 * `mkdir 'directory_name'   // make a directory`
 * `rmdir                    // remove directory ; can't rmdir current directory`
 * `touch 'filename'  // creates specified 'filename'` 
 * `rm 'file_or_directory_name'`
 * `rm -rf 'directory_name'  // !!!!! DANGER !!!! remove the folder and all its files immediately (i.e. NOT to trash!!!)`
 * `cmd-k        // clear the terminal display`
### Git
 * Benefits:  
 : * retains history  
 : * supports collaboration
 * Git repository is a tracked folder
 :    
 * `git init`
 : from within the desired folder; creates the .git directory, which is the history`
 
 * `git status`
 : * displays the current state
 : * every commit records who made the change, the differences, and a commit message
 * `git add 'filename'`
 : file is staged
 * `git commit -m "message"`
 : * commits the file; failure to enter a message takes the terminal to a git command line (VIM)
 : * If you get stuck in the git command line after a commit without a message:
        1. "i" to type
        2. esc to exit type mode
        3. ":x" to exit
 * `git commit -a -m "message"`
 : the added -a stages all modified files
* `git remote add origin 'http...'`
: good practice to 'pwd' before adding a remote
* `git push origin master`
: pushes to remote (origin) from local (master)
  • Note that there should be:
    • NO spaces in front of header tags (i.e. #).
    • There must be at least one space in front of bullet tags (i.e. *).
    • Inline code is surrounded by backticks (i.e. ` ; above the tab key on MacBooks), not by single quote marks (i.e. ')
    • In my example, I’ve kept the definition tags (i.e. :) at the same level as their parent bullet.
    • I like definition tags when there are only one or two sub-elements. If there are more than one, I augment the definition tag with sub-bullets. If a list is deeply nested or lengthy, I tend to use just bullets and no definition elements.
    • Refer to http://daringfireball.net/projects/markdown/basics and http://daringfireball.net/projects/markdown/syntax for more syntax, to include code blocks.

  1. Save the file as a markdown file:
    1. cmd-s
    2. The filename should end in .md. If it doesn’t, you’ll need to explicitely tell Sublime to process it as Markdown. Of course, it’s easier - and better practice - just to give it the .md extension.

Preview and Save the Markdown File

  1. Command Sublime to open a preview in your browser. Note that this needs to be done whenever the file is opened, or there isn’t already a preview open in your browser.

    1. cmd+shift+p
    2. Markdown Preview: Preview in Browser
    3. markdown [8]

  2. As you edit the document, remember to save it (cmd-s). Whenever you save it, the browser should do a Live Reload.


p.s. Footnotes are much, MUCH easier in Sublime’s markdown than they are in Hexo’s markdown!