DEV Community

Sanath Samarasinghe
Sanath Samarasinghe

Posted on

Highly effective Cornell Notes with Obsidian

Cornell Notes

I recently learned about Cornell Notes, which is a very effective way to take notes that focuses on memory retention and organization of data. It was developed by Cornell University.
You can read more about Cornell Notes here: Cornell Note-taking System

What is Cornell note?

The Cornell note layout with a cue column for prompts, a note-taking area for detailed information, and a summary section for condensing key points

Image description

How to take Cornell Notes in Obsidian

Obsidian mainly focuses on the Zettelkasten method for note-taking, so it does not support the Cornell Note out of the box. But with Obsidian's highly extensible nature, it's easy to achieve the appeal of Cornell Notes with Obsidian using CSS snippets.

To achieve this, we need to follow certain patterns. My favorite method is to use callouts for cues and the summary. Here is a sample markdown note and what it looks like in the end.

>[!cue] This is cue

Notes go here
- Could be a 
- list
- of items

or a paragraph

>[!cue] This is another cue

Note about the cue, could be a list or  anything else

>[!summary] This is a summary
> This is the content of summary

Enter fullscreen mode Exit fullscreen mode

How it display in obsidian

Image description


First, you need to create snippets in your vault under this path .obsidian/snippets/cornell-notes.css

add the following CSS content there

.markdown-preview-view .callout[data-callout="cue"] {
    float: right;
    padding: 8px;
    position: absolute;
    left: 4%;
    width: 20%;
    max-width: 300px;
    min-width: 150px;
    max-height: 200px;
    color: white;

.markdown-preview-view .callout[data-callout="cue"] .callout-icon {
    display: none;
} .markdown-preview-sizer {
    max-width: 50%;

.markdown-preview-view .callout[data-callout="summary"] {
    margin-top: 100px;
Enter fullscreen mode Exit fullscreen mode

The last step is to enable the snippets from the setting. Goto Obsidian Settings -> Appearance enabled the toggle of Cornell notes.

Image description

That's all. Enjoy...

*** NOTE: Please feel free to suggest any improvement to the css

Top comments (0)