Can cloud sync, maintain the same notes on any number of devices
Can also be shared via the cloud
Open source, it is free (and has to remain free)
Uses Markdown
Slight learning curve
Not nearly as bad as \(\LaTeX\)
Little use of mouse and pointing, very keyboard-oriented
May seem inefficient and archaic, but is ultimately more efficient
Easily done using a laptop computer without external keyboard or mouse
For the die hard, there is even a CLI (command line interface) version (obviously will lack some features)
Mermaid is a built-in extension to handle graphs
fairly intuitive to use
Anchors and hyperlinks for cross referencing material
infinitely hierarchical sub*notebooks
Easier to organize material
Easier to reorganize material
Has a responsive previewer, type in Markdown and immediately verify the output
Exports to a variety of formats (with some caveats)
PDF for printing
HTML for publishing on the web (viewable using just a browser)
Fairly small footprint and not processing demanding, works well on older computers
Can paste screenshots directly into content, easy to screenshot Zoom/Discord as part of the notes
2 Getting Started
Use the Help menu!
Practice makes perfect
Learn from examples (like how Tak uses Joplin in lectures)
Use bullet lists if you find that easier to read instead of full paragraphs
Use nested bullet lists to indicate hierarchy
Use italic or boldface to emphasize
If you are familiar with HTML (CSS), use span to change the color of text.
Use headers, start with at least one #. The number of #s determine level of header ## But how do I learn Markdown the easy way?
Joplin uses Markdown as the “coding” language
Markdown is useful for many purposes, it is a valuable skill
Fairly easy to learn, but there is still a learning curve ## Learning by example
Joplin has two editors and a viewer, use the button (it looks like a rectangle with a verticle splitting line) to switch between the “layouts”, control-L does the same thing
Or, click the button to toggle
When the “pen-on-paper” icon is lit, then Joplin is in WYSIWYG mode
Switch between WYSIWYG and Markdown mode to learn Markdown
There is no substitute for practicing!
3 Basic tables
The following defines a basic table:
|col1 header|col2 header||-|-||col 1 data| col 2 data|
col1 header
col2 header
col 1 data
col 2 data
4 Justifications
Columns can also specify justifications
|left|center|right||:-|-|-:||this is left justified|this is centered|this is right justified|
left
center
right
this is left justified
this is centered
this is right justified
5 Anchors
An anchor is a bookmark, each anchor has a name that should be unique within the same page (note)
Every header is automatically an anchor
Automatic anchor id is all-lower-case, hyphen separated
Can also use HTML id attribute to define custom anchors
For example, the following code defines an anchor
<spanid="anchor-name">Anchor text</span>
Change span to div if the anchor is a block (paragraph) instead of a inline (phrase).
5.1 How to use anchors in notes
It is helpful to use anchors to help locate items:
Definitions
Terminology
Sample programs
6 Hyperlinks
General hyperlink format:
[text](https://link)
7 Reference to a Joplin note
Each note has its own ID
Click the “i in a circle” symbol at the upper right corner, or
Right-click the target note, then select “Copy Markdown Link”
Then copy the note ID to the clipboard
Reference to a note using the note ID (note the :/ before the actual ID of the note):
[text](:/noteId)
If there are anchors defined in a note, a reference can link to an anchor directly:
[text](:/noteId#anchorId)
7.1 Tips
Try to keep notes that need a lot of cross referencing in the same (sub)notebook
This helps to minimize the need to click back-and-forth between notebooks
Try to use a consistent way to name headers and anchors, this makes it easier to reference the anchors without having to look up the actual anchor itself
During class, don’t worry about getting the right note and anchor reference, just jot down note to self, like “TODO: link to definition of blah” and resolve these references after class
For custom (non-header) anchors, it helps to highlight them
Use templates to pre-define a span or div anchor template
8 Visual linking
Anchors and hyperlinks are functional but they may not be intuitive to visual learners
It may be helpful to keep concepts visually linked or correlated
8.1 templates that may be helpful
With the template plugin, Joplin can quickly insert a template into a note. Combined with HTML code a dash of CSS, you can incorporate some visual effect that can help with reviewing material.
8.1.1 div anchor
This is an anchor that applies to a div (generic HTML block element). The following is the effect of one
<!-- begin divAnchorDescription --><divid="divAnchorDescription"style="border: ridge"><divstyle="border: dotted thin; font-style: italic ">anchor: #divAnchorDescription</div>As you can see, this creates a block that makes an explicit (displayed) anchor. This makes it visually stand out. The displayed anchor ID also makes it easier to create references.</div><!-- end divAnchorDescription -->
anchor: #divAnchorDescription
As you can see, this creates a block that makes an explicit (displayed) anchor. This makes it visually stand out. The displayed anchor ID also makes it easier to create references.
8.1.2 box right
This is a floating text box on the right hand side. The idea is that this serves as a post-it to help summarize ideas. This can be used inside a div anchor.
#boxRightInDivAnchor
The trick to use a cue is to put it where it does not interfere with the main section of the anchored block. You can see how a floating box (this box) can be nested in an anchored block!
Typically, type your nodes in a div anchor
Or, after the fact, use div anchors to chop continuous notes into blocks
Each block has an anchor so references are easy to make
However, the notes may be quite lengthy and verbose
It is good to keep each block within a physical “page”/“screen” so that no scrolling is needed to relate notes/concepts in a block
However, even within a block, things can get a little busy and difficult to find something, that is when a little “post-it” box can be helpful as a “cue”
8.1.3 span anchor
Occasionally, you may have an equation or two that needs to be referenced. You can use a span (generic HTML inline element) anchor #quadraticEqn \(ax^2+bx+c=0\) so that an inline definition can have an anchor.
9 Workflow
9.1 Before lecture
Open Joplin and get a note ready for the day ## During lecture
Take notes using bullet lists
Don’t worry about group related items
Don’t worry about cross referencing content using the right links, do comment connections of concepts
Mark things to be done with TODO or
use check boxes - [ ] text, appears as follows
checkbox item
Record time periodically so you can correlated with recorded lectures (use the tool in Joplin editor)
Capture screen shots
Capture URLs of documents # After lecture
Organize related sequential notes in div anchors
Address TODO and checkbox items
Summarize using box right within div anchors
Cross reference material, especially definitions, equations and terminology
Group all definitions in one section (including equations and terminology)
This makes it easier to spot definitions in a review
Consider using a span anchor per definition so you can reference the definitions more easily from other notes
10 Considerations
A Joplin notebook is a container (like a folder), where a note is like a file
There is no limit to the depth of structure using subnotebooks
The key is about printing
Joplin does not have an easy way to recursively traverse notebooks and print notes accordingly
Exporting all to HTML will lose the ordering of notes within a notebook, and the ordering of subnotebooks within another notebook
It may be a good idea to name notes and subnotebooks based on ordering, using a number to precede the actual description/name
Links to other notes do not work in exports # Good practice
Name subnotebooks and notes using a numeric prefix to make sorting explicit
Use the classic trick of incrementing by 10 to make reordering easier (to a certain point)
Use leading zeroes to make sure sorting happens the way it should
Example: 010 topic name
Date can also be used for chronological order, but use year first and also use leading zeros, such as 20220104 for January 4th of 2022. # Joplin is Joplin
To utilize notes to the max, use Joplin to view Joplin notes (so that hyperlinks work)
You can use the layout button (a rectangle with a vertical splitter line) or control-L to toggle the layout until you get to the “Viewer” mode
You can also hide the other panes using using F10 and F11 to toggle the notebook pane (good for organizing notebooks and subnotebooks) and the notes (good for organizing notes in the same notebook) panes.
To maximize the use of the width, use the Tools menu, then Appearance, then Editor maximum width, and specify 0 despite the recommendation of 600
Also, to utilize more space without sacrificing the notebooks and notes panes, use the View menu, then change application layout, then move the notes pane to the left. This increases the width of the editor/viewer area.