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.
Nicer checkboxes in preview by @kepano
And here is my remix, nicer checkboxes in Editor:
/* Round checkbxes in preview and editor */
input[type=checkbox], .cm-formatting-task {
-webkit-appearance: none;
appearance: none;
border-radius: 50%;
border: 1px solid var(--text-faint);
padding: 0;
vertical-align: middle;
}
.cm-s-obsidian span.cm-formatting-task {
color: transparent;
width: 1.25em !important;
height: 1.25em;
display: inline-block;
}
input[type=checkbox]:focus{
outline:0;
}
input[type=checkbox]:checked, .cm-formatting-task.cm-property {
background-color: var(--text-accent-hover);
border: 1px solid var(--text-accent-hover);
background-position: center;
background-size: 70%;
background-repeat: no-repeat;
background-image: url('data:image/svg+xml; utf8, <svg width="12px" height="10px" viewBox="0 0 12 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-4.000000, -6.000000)" fill="%23ffffff"><path d="M8.1043257,14.0367999 L4.52468714,10.5420499 C4.32525014,10.3497722 4.32525014,10.0368095 4.52468714,9.8424863 L5.24777413,9.1439454 C5.44721114,8.95166768 5.77142411,8.95166768 5.97086112,9.1439454 L8.46638057,11.5903727 L14.0291389,6.1442083 C14.2285759,5.95193057 14.5527889,5.95193057 14.7522259,6.1442083 L15.4753129,6.84377194 C15.6747499,7.03604967 15.6747499,7.35003511 15.4753129,7.54129009 L8.82741268,14.0367999 C8.62797568,14.2290777 8.3037627,14.2290777 8.1043257,14.0367999"></path></g></g></svg>');
}
Looks like this:
Since the contents of the element are transparent, to check/uncheck a checkbox, place your cursor right after it:
Press left arrow once, then press backspace.
To check an item:
Press your cursor behind the checkbox, press left arrow once, press backspace, type ‘x’ and it will turn into a checkbox.
Here is how it works in practice
This makes long checklists in Edit more way more understandable and reduces my need to switch to Preview!