Table of Contents

Options
Using Obsidian
- Custom CSS

12 Mar 2023

I had seen this app that looks really exciting 6 months ago, but I didn't want to test it out because I was invested so much in builing my notes site with Pelican.

!projects/notes

However, I have started a few weeks ago to write internal notes in Markdown - content I cannot share on the notes site.

While I want to keep writing in VS Code, I needed a way to see these internal notes in HTML.

Options

3 options:

simple Markdown parser script

I started down this route, testing a couple. !python/libraries-markdown-parsers

Realised it would take me some time to flesh this out and build the logic - plus getting bogged down in some details (eg parsing seems different for each parser).

use Pelican again

!python/library-pelican

This would mean "just" setup again a Pelican site for my internal notes folder.

Still an open option, but because I'm curious...

Obsidian

A second brain, for you, forever.

https://obsidian.md/

Documentation is great as far as I can see:

Obsidian Help

obsidian.md

https://help.obsidian.md/Obsidian/Index

A bit of testing and I'm sold. It's really great.

I will use it for note-taking for my internal notes first, and perhaps expand to my notes site later.

Using Obsidian

Custom CSS

To change style, create a custom in the Vault folder under Settings > Appearance > CSS snippets.

obsidian/obsidian-settings-css.jpg

eg main.css file in folder /.obsidian/snippets/main.css.

My initial custom CSS file to re-adjust headings:

:root{
    --nic_main: #000305;
    --nic_red: #d9534f;
    --nic_blue: #0275d8;
    --nic_green: #5cb85c;
    --nic_yellow: #f0ad4e;
    --font-size-h1: 1.2rem;
    --font-size-h2: 1.1rem;
    --font-size-h3: 1rem;
    --font-size-h4: 1rem;
    --font-size-h5: 1rem;
    --font-size-h6: 1rem;
}

.cm-s-obsidian div.HyperMD-header-1, .cm-header.cm-header-1, .markdown-preview-view h1
{
    font-family: var(--font-family-editor);
    font-weight: bold;
    font-size: var(--font-size-h1); 
    color: var(--nic_red);
    font-weight:500;
}
.cm-s-obsidian div.HyperMD-header-1, .cm-header.cm-header-1, .markdown-preview-view h1:before {
    content: '> ';
    color: var(--nic_red);
}

.cm-s-obsidian div.HyperMD-header-2,.cm-header.cm-header-2, .markdown-preview-view h2
{
    font-family: var(--font-family-editor);
    font-weight: bold;
    font-size: var(--font-size-h2);
    color: var(--nic_blue);
    font-weight:500;
}
.cm-s-obsidian div.HyperMD-header-2,.cm-header.cm-header-2, .markdown-preview-view h2:before {
    content: '>> ';
    color: var(--nic_blue);
}

.cm-s-obsidian div.HyperMD-header-3,.cm-header.cm-header-3, .markdown-preview-view h3
{
    font-family: var(--font-family-editor);
    font-weight: bold;
    font-size: var(--font-size-h3);
    color: var(--nic_green);
    font-weight:500;
}
.cm-s-obsidian div.HyperMD-header-3,.cm-header.cm-header-3, .markdown-preview-view h3:before {
    content: '>>> ';
    color: var(--nic_green);
}

.cm-s-obsidian div.HyperMD-header-4, .cm-header.cm-header-4, .markdown-preview-view h4
{
    font-family: var(--font-family-editor);
    font-weight: bold;
    font-size: var(--font-size-h4);
    color: var(--nic_yellow);
    font-weight:500;
}
.cm-s-obsidian div.HyperMD-header-4, .cm-header.cm-header-4, .markdown-preview-view h4:before {
    content: '>>> ';
    color: var(--nic_yellow);
}

.cm-s-obsidian div.HyperMD-header-5, .cm-header.cm-header-5, .markdown-preview-view h5
{
    font-family: var(--font-family-editor);
    font-weight: bold;
    font-size: var(--font-size-h5);
    /* color: var(--nic_red); */
    font-weight:500;
}

.cm-s-obsidian div.HyperMD-header-6,.cm-header.cm-header-6, .markdown-preview-view h6
{
    font-family: var(--font-family-editor);
    font-weight: bold;
    font-size: var(--font-size-h6);
    /* color: var(--nic_red); */
    font-weight:500;
}