Last active
November 27, 2022 19:29
-
-
Save dmpop/c196252509d52108202e49c2560b99c5 to your computer and use it in GitHub Desktop.
Custom Joplin Markdown rendering
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* For styling the rendered Markdown */ | |
* .annotator-hl { | |
background-color: rgba(0, 216, 181, .3) !important; | |
border: 3px solid red !important; | |
} | |
body { | |
font-family: 'Vollkorn', serif !important; | |
margin-bottom: 2em !important; | |
font-size: 1.1em; | |
line-height: 1.5em; | |
} | |
code, | |
pre { | |
font-family: 'JetBrains Mono', 'Fira Code'; | |
// font-weight: 600; | |
font-size: .95em; | |
line-height: 1.5em; | |
border-radius: 4px; | |
} | |
pre { | |
background: rgba(0, 76, 114, 0.04) !important; // A little lighter | |
} | |
code { | |
background: rgba(0, 76, 114, 0.08); // A little darker | |
} | |
pre code { | |
background: none !important; | |
} | |
.code, | |
.inline-code { | |
border: none; | |
background: rgba(0, 76, 114, 0.08); | |
border-radius: 4px; | |
} | |
img[title='250px'] { width: 250px; } | |
img[title='150px'] { width: 150px; } | |
img[title='450px'] { width: 450px; } | |
mark { | |
background: #3edbff53 !important; | |
padding: 1px 3px; | |
} | |
input[type='checkbox'] { | |
cursor: pointer; | |
margin-right: 1em; | |
margin-top: 0.55em; | |
margin-bottom: 0; | |
margin-left: 0; | |
} | |
input[type='checkbox'], | |
.md-checkbox .checkbox-label-unchecked, | |
.md-checkbox .checkbox-label-checked, | |
li.md-checkbox { | |
cursor: pointer !important; | |
} | |
/* Note: This is also set in the app directly, so if you remove it it may not | |
* go away as expected. */ | |
.md-checkbox .checkbox-label-checked, | |
.md-checkbox .checkbox-label-checked ~ * { | |
opacity: 0.5; | |
} | |
.md-checkbox .checkbox-label-unchecked { | |
opacity: 1; | |
} | |
.md-checkbox:hover { | |
background: rgba(0, 76, 114, 0.03); | |
} | |
.md-checkbox p { | |
display: flex; | |
padding-left: 0.55em; | |
} | |
.md-checkbox pre { | |
margin-left: 24px; | |
} | |
.md-checkbox ul, | |
.md-checkbox ol { | |
margin-left: 3.2em; | |
} | |
/********************************* | |
**** Links to internal notes **** | |
*********************************/ | |
a .resource-icon { | |
display: none; | |
} | |
a[href='#'] { | |
color: green; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment