Functional and Beautiful. I think I might need to make changes to this to work with the Zettelkasten theme that I’m using.
Lovely! Thank you very much!
Im hoping/waiting for Collapsible indents feature in the preview mode as well!!
Vim mode with line focus
/* Cursor color in normal vim mode and opacity */
.cm-fat-cursor .CodeMirror-cursor, .cm-animate-fat-cursor {
width: 0.5em;
background: #d65d0e;
opacity: 60% !important;
}
/*an active line highlight in vim normal mode */
.cm-fat-cursor .CodeMirror-activeline .CodeMirror-linebackground{
background-color: rgba(89, 75, 95, 0.99) !important;
}
/*if you want the highlight to present in both normal and insert mode of vim*/
.CodeMirror-activeline .CodeMirror-linebackground{
background-color: rgba(89, 75, 95, 0.99) !important;
}
How can i make it work for both Light and Dark themes?
“Naked” Embeds by @death.au
/* Naked Embeds */
.markdown-embed-title { display: none; }
.markdown-preview-view .markdown-embed-content>:first-child { margin-top: 0;}
.markdown-preview-view .markdown-embed-content>:last-child { margin-bottom: 0;}
/*remove the following two line, you will get border and scroll*/
.markdown-preview-view .markdown-embed { border:none; padding:0; margin:0; }
.markdown-preview-view .markdown-embed-content {
max-height: unset;
background-color: var(--background-secondary); /*define different bg color*/
}
/* the link on the top right corner*/
.markdown-embed-link {
color: var(--text-faint) !important;
}
.markdown-embed-link:hover {
color: var(--text-accent) !important;
}
To further remove the header, add the following part:
/* remove the first heading*/
.markdown-preview-view .markdown-embed-content>:first-child { display:none;}
if you don’t add the .theme-dark
or .theme-light
selector, it will work for both mode.
Would it be possible to randomise the colours? from a palette?
I don’t know how to do that. Maybe possible with LESS/SASS extended css… if you find a way let me know.
can anyone share the code to change the default font to say Times New Roman
in the preview mode ?
/* font for everything outside of editor/preview panes */
.app-container {
font-family: var(--font-family-preview);
}
/* normal text outside of headings and code of editor */
.cm-s-obsidian, .mod-single-child .cm-s-obsidian {
font-family: var(--font-family-editor);
}
/* normal text outside of headings and code of preview */
.markdown-preview-view, .mod-single-child .markdown-preview-view {
font-family: var(--font-family-editor);
}
/* _hyphenation_and_justification */
/*-------------------------------------*/
.cm-s-obsidian, .markdown-preview-view {
text-align: justify;
hyphens: auto;
Got it from @Boyd.
@Klaas not sure what hyphenation and justification means in this context. Do you have a picture of the effect?
It will (a) justify the whole text and (b) breaking words into two lines if needed:
@Boyd answered it. I just want to add that I like the hack, and use it even when I try out other themes.
In Edit mode the justification makes some awkward gaps, but in Preview mode that is corrected.
Enlarge image on hover
.markdown-preview-view img {
display: block;
margin-top: 20pt;
margin-bottom: 20pt;
margin-left: auto;
margin-right: auto;
width: 50%; /* experiment with values */
transition:transform 0.25s ease;
}
.markdown-preview-view img:hover {
-webkit-transform:scale(1.8); /* experiment with values */
transform:scale(2);
}
In script I posted above: When I hover on picture then images is enlarged. But I would like to add strong blur to all elements in behind the image, kind of focus mode for images. Does somebody have idea how to make it?
Thank you.
Hi, i found a useful small hack to support RTL (for Hebrew and arabic) by @dorongol
may be you can add it to the list.
Current version: v0.7.3
.view-header{
direction: rtl;
text-align: right;
}
.view-content{
text-align: right;
direction: rtl;
}
Put country flags when you are using hashtag of ISO language code. You need to do it manually for each language.
Examples:
Czech language
.tag[href="#cze"]{
background: #b5fbac;
text-shadow: 20px 20px 60px #9ad592,
-20px -20px 60px #d0ffc6;
color: black;
}
.tag[href="#cze"]:before {
color: white;
content: "🇨🇿";
padding: -20pt -20pt 15pt 5pt;
margin: 0pt;
font-size: 15pt;
}
.tag[href="#cze"]:hover {
border-radius: 14px;
background: #b5fbac;
box-shadow: 20px 20px 60px #9ad592,
-20px -20px 60px #d0ffc6;
}
English language
.tag[href="#eng"]{
color: black;
background: #b5fbac;
text-shadow: 20px 20px 60px #9ad592,
-20px -20px 60px #d0ffc6;
}
.tag[href="#eng"]:before {
color: white;
content: "🇺🇸";
padding: -20pt -20pt 15pt 5pt;
margin: 0pt;
font-size: 15pt;
}
.tag[href="#eng"]:hover {
border-radius: 14px;
background: #b5fbac;
box-shadow: 20px 20px 60px #9ad592,
-20px -20px 60px #d0ffc6;
}
Somebody should make native plugin where user can define many replacements of the specific text tag into “icon tag” or combination of both.