<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Sanath Samarasinghe</title>
    <description>The latest articles on DEV Community by Sanath Samarasinghe (@sanathks).</description>
    <link>https://dev.to/sanathks</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F984941%2F030206e7-b0a9-441d-a6c1-63c5b90a1160.jpeg</url>
      <title>DEV Community: Sanath Samarasinghe</title>
      <link>https://dev.to/sanathks</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/sanathks"/>
    <language>en</language>
    <item>
      <title>Highly effective Cornell Notes with Obsidian</title>
      <dc:creator>Sanath Samarasinghe</dc:creator>
      <pubDate>Mon, 20 May 2024 09:34:35 +0000</pubDate>
      <link>https://dev.to/sanathks/highly-effective-cornell-notes-with-obsidian-6le</link>
      <guid>https://dev.to/sanathks/highly-effective-cornell-notes-with-obsidian-6le</guid>
      <description>&lt;h2&gt;
  
  
  Cornell Notes
&lt;/h2&gt;

&lt;p&gt;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.&lt;br&gt;
You can read more about Cornell Notes here: &lt;a href="https://lsc.cornell.edu/how-to-study/taking-notes/cornell-note-taking-system/" rel="noopener noreferrer"&gt;Cornell Note-taking System&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  What is Cornell note?
&lt;/h3&gt;

&lt;p&gt;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&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ft6mmfi97rmqflvgincnp.jpeg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ft6mmfi97rmqflvgincnp.jpeg" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  How to take Cornell Notes in Obsidian
&lt;/h2&gt;

&lt;p&gt;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. &lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight markdown"&gt;&lt;code&gt;&lt;span class="gt"&gt;

&amp;gt;[!cue] This is cue&lt;/span&gt;

Notes go here
&lt;span class="p"&gt;-&lt;/span&gt; Could be a 
&lt;span class="p"&gt;-&lt;/span&gt; list
&lt;span class="p"&gt;-&lt;/span&gt; of items

or a paragraph
&lt;span class="gt"&gt;
&amp;gt;[!cue] This is another cue&lt;/span&gt;

Note about the cue, could be a list or  anything else
&lt;span class="gt"&gt;
&amp;gt;[!summary] This is a summary&lt;/span&gt;
&lt;span class="gt"&gt;&amp;gt; This is the content of summary&lt;/span&gt;&lt;span class="sb"&gt;



&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;
&lt;h4&gt;
  
  
  How it display in obsidian
&lt;/h4&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fq0rzan6466nbtk6f4zz2.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fq0rzan6466nbtk6f4zz2.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h3&gt;
  
  
  Setup
&lt;/h3&gt;

&lt;p&gt;First, you need to create snippets in your vault under this path &lt;code&gt;.obsidian/snippets/cornell-notes.css&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;add the following CSS content there&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight css"&gt;&lt;code&gt;

&lt;span class="nc"&gt;.markdown-preview-view&lt;/span&gt; &lt;span class="nc"&gt;.callout&lt;/span&gt;&lt;span class="o"&gt;[&lt;/span&gt;&lt;span class="nt"&gt;data-callout&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s1"&gt;"cue"&lt;/span&gt;&lt;span class="o"&gt;]&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nl"&gt;float&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;right&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;padding&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;8px&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;position&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;absolute&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;left&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;4%&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;width&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;20%&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;max-width&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;300px&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;min-width&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;150px&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;max-height&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;200px&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nl"&gt;color&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="no"&gt;white&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nc"&gt;.markdown-preview-view&lt;/span&gt; &lt;span class="nc"&gt;.callout&lt;/span&gt;&lt;span class="o"&gt;[&lt;/span&gt;&lt;span class="nt"&gt;data-callout&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s1"&gt;"cue"&lt;/span&gt;&lt;span class="o"&gt;]&lt;/span&gt; &lt;span class="nc"&gt;.callout-icon&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nl"&gt;display&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;none&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nc"&gt;.markdown-preview-view.is-readable-line-width&lt;/span&gt; &lt;span class="nc"&gt;.markdown-preview-sizer&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nl"&gt;max-width&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;50%&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nc"&gt;.markdown-preview-view&lt;/span&gt; &lt;span class="nc"&gt;.callout&lt;/span&gt;&lt;span class="o"&gt;[&lt;/span&gt;&lt;span class="nt"&gt;data-callout&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s1"&gt;"summary"&lt;/span&gt;&lt;span class="o"&gt;]&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nl"&gt;margin-top&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;100px&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;The last step is to enable the snippets from the setting. Goto Obsidian Settings -&amp;gt; Appearance enabled the toggle of Cornell notes.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fw8ru51tl9nxfc2bdjeku.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fw8ru51tl9nxfc2bdjeku.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;That's all. Enjoy... &lt;/p&gt;

&lt;p&gt;*** NOTE: Please feel free to suggest any improvement to the css&lt;/p&gt;

</description>
      <category>obsidian</category>
      <category>cornellnotes</category>
      <category>note</category>
    </item>
  </channel>
</rss>
