I recheck according to your comment and It was my mistake. I missed the last brace…
I am sorry for the trouble.
It work great now! 
. Thank you!
No trouble, that’s what communities are for 
1 Like
Can someone suggest a way to change the colour and properties of italicised or bold texts? I intend to use it as an alternative to highlighting of sorts.
@DummyME
In the preview portion those are called by their standard html elements. <strong> for bold and <em> for italics. On the edit side they are called by classes “cm-strong” and “cm-em” respectively. For the preview mode you can also have different changes based on the class of the document.
As an example the below code with change emphasized words to green in edit mode, red in preview mode unless it has the css class of “test” in which case it would be blue:
em {
color: red;
}
.cm-em{
color: green;
}
div.test em{
color: blue;
}
This is what it would look like (edit mode on the left and preview on the right):
2 Likes
Thanks a lot.
Is there a way I can get away with the tilt as well. I vaguely remember it to be called decoration?
Thanks!
Responsive font 
same document but the smaller is the window, the smaller is the font!
Here is the code
:root
{
--font-size-normal: clamp(12px, 5vh, 20px);
--font-size-code: clamp(12px, 5vh, 18px);
--font-size-side-dock: clamp(12px, 5vh, 16px);
--font-size-side-dock-title: clamp(12px, 5vh, 18px);
--font-size-blockquote: clamp(16px, 5vh, 22px);
--font-size-status-bar: clamp(16px, 5vh, 16px);
--font-small: clamp(16px, 5vh, 18px);
--font-medium: clamp(16px, 5vh, 21px);
}
PS: You can do that with header too 
! with the clamp() property. But I am too lazy
3 Likes
I am unable to apply it as a snippet in v0.9.22. Can someone help?
As I explored CSS snippets and customization, I made a short video walk through to get started:
Hope it’s helpful!
Regarding this wonderful explanation, is there a way to display the src page of a header/block embed - as is presented with standard page embed ![[page ref]]? It would be nice to display not only the embedded header at the top of the transclusion, but also the file in which it resides.
What to do if I would like to have relative path in my edit mode (in md files) but don’t really want them to render as such? While in preview, I would like them to be stripped of path and just the filename.
This is link to a file : [[Vault/Folder/New File Name]]
to be displayed as in preview
This is link to a file : New File Name
^ with clickable link ofcourse
Outliner for the outliners (Improved version)
.collapsible-item-collapse {
padding: 2px 15px 2px 15px;
left:1.5px;
}
div.collapsible-item-inner{
position:relative;
padding-left: 15px;
}
.outline .collapsible-item-children {
margin-left: 20px;
border-left: 1px solid rgba(118,158,165,0.2);
border-radius: 4px;
transition:all 0.5s ease-in-out;
}
.outline .collapsible-item-children:hover {
border-left-color: rgba(118,158,165,0.4);
}
1 Like
I’ve got a snippet. It could do with something to make it look a lot nicer than just the default text, but it’s the key starting point.
The alt attribute of an internal-embed div contains text of the form “File name > header”, so this works well.
.internal-embed::before{
content: attr(alt);
}
1 Like
Unfortunately not, by the looks of it.
So much of CSS is about working with the structure and attributes of the HTML, and in this case it doesn’t look like there are any attributes that don’t also have the path in it. I don’t think there’s a way to do string splitting in CSS alone 
Didn’t expect a hack, but gave it a try anyway.
Thanks.
Thank you. Truly appreciate it. I modified appropriately to fit the style - looks great.
Current Status: (now I no longer need to use “Fleeting Note” in my header, since I now know its from a fleeting note 
)
Is there a way to carry the content into the markdown-embed-link area? Ultimately I am trying to display the note title in the link area when its a whole embedded note. In other words bringing it down in line with how the header title is embedded.
E.g.:
I would love to have it after the special red character there. The problem I then might have though is how to basically create an “if” statement (the only language I know how to describe it - though not in CSS) where if it is a full-page embed like the latter image, it would have a display: none; parameter. But if its a header or block embed, it would display the file name.
Thanks again for your help. Carrying data to other locations via CSS is something I have no experience with. I can modify a great deal on the beginner level, but not so in this area.
This looks great, thank you so much for sharing. Just wanted to let you know is not working for me on v.0.10.1 I tried different backgrounds and line colors.
I found that this can be fixed by removing width:50% from the .markdown-preview-view img code block.
It’s one the solutions that’s most accessible. Although, be careful with the amount you input for the resizing notation, you can receive a overblown image with the hover if you set it to a large amount.
Doesn’t work for me 
Can someone share a code snippet that can increase or decrease text font size in preview and editing mode, I can play around and make it optimal for me.