Visual Studio Code Tips
Markdown Preview Enhanced Customization
I like to add my own tag element and use some nice colors.
Markdown Preview Enhanced>Extend Parser
module.exports = {
onWillParseMarkdown: function(markdown) {
return new Promise((resolve, reject)=> {
// markdown = markdown.replace(/(?<=\s|^)\@[\S]*/g, ($0)=> '*'+$0+'*')
markdown = markdown.replace(/(?<=\s|^)\@[\S]+/g, ($0) => '<div class="tag">@'+$0.replace('@', '')+'</div>')
return resolve(markdown)
})
},
onDidParseMarkdown: function(html) {
return new Promise((resolve, reject)=> {
return resolve(html)
})
}
}
Markdown Preview Enhanced>Customize CSS
/* Please visit the URL below for more information: */
/* https://shd101wyy.github.io/markdown-preview-enhanced/#/customize-css */
:root {
--theme-main: #4fa6c0;
--theme-main-lighten: #66dbff;
--theme-main-transparent: #4fa6c040;
// --text-main: #89A;
--text-main: #666;
// --background-main: #292D3E;
--background-main: #f1f1f1;
--background-main-lighten: #4d5577;
}
.markdown-preview {
background: var(--background-main);
}
.markdown-preview.markdown-preview {
// modify your style here
// eg: background-color: blue;
color: var(--text-main);
font-family: roboto, sans-serif;
font-weight:300;
}
.markdown-preview a {
color:var(--theme-main);
text-decoration: underline;
}
.markdown-preview a:hover {
color: var(--theme-main-lighten);
text-decoration: underline;
}
.markdown-preview code {
border:1px solid var(--background-main-lighten);
}
.markdown-preview.p>code {
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.markdown-preview pre {
border:1px solid var(--background-main-lighten);
}
.markdown-preview strong {
color: var(--theme-main);
}
.markdown-preview h1, .markdown-preview h2, .markdown-preview h3 {
font-weight: 300;
color: var(--theme-main);
}
.markdown-preview h1 {
text-align: center;
}
.markdown-preview h2 {
font-weight: 600;
}
.markdown-preview h4 {
font-weight: 400;
font-style: italic;
color: #666;
font-size: larger;
}
.markdown-preview hr {
background: var(--theme-main-transparent);
}
.markdown-preview .tag {
display:inline-block;
border: 1px solid var(--text-main);
border-radius:5px;
padding:0px 5px;
}