首页 > 其他分享 >VsCode更换MarkDown样式到底能有多好看?

VsCode更换MarkDown样式到底能有多好看?

时间:2022-12-06 16:57:55浏览次数:39  
标签:3px MarkDown VsCode auto 样式 important 5px font border

vs code到底有多强大?

先看看MarkDown笔记的预览效果

这只是一种插件

谁再让我用别的软件写代码

我就把这篇文章扔过去

如何操作?

1、安装插件:在扩展中搜索Markdown Preview Enhance

2、点击【扩展设置】

3、点击【查看】—【命令面板】

4、在搜索框中输入markdown-preview-enhanced.customizeCss,markdown的样式代码就出来了。然后进行样式的美化~

5、Ctrl+K V查看预览结果,是不是发现预览的效果和你正在看的文章样式一模一样呢?关注公众號【小知识酷】,查看更多vscode功能

6、代码样式

#nice {
    line-height: 1.8;
    color: #2b2b2b;
    font-family: Optima-Regular, Optima, PingFangTC-Light, PingFangSC-light, PingFangTC-light;
    letter-spacing: 2px;
    background-image: linear-gradient(90deg, rgba(50, 0, 0, 0.04) 3%, rgba(0, 0, 0, 0) 3%), linear-gradient(360deg, rgba(50, 0, 0, 0.04) 3%, rgba(0, 0, 0, 0) 3%);
    background-size: 20px 20px;
    background-position: center center;
}
p{
  font-size:15px !important;
}
/* 一级标题 */

h1 {
    display: table;
    margin: 30px auto 20px auto !important;
    padding: 10px !important;
    background-image: linear-gradient(to left,     rgb(253, 213, 231), rgb(194, 226, 249));
    border-width: 1px;
    border-radius: 10px;
    box-shadow: 3px 3px 3px #ccc;
    font-size: 20px !important;
    text-align:center;
}

h2 {
    display: table;
    margin: 30px auto 20px auto !important;
    padding: 0px 10px !important;
    border-bottom: 5px solid #205792;
    text-align: center;
    font-size: 18px !important;
}


/* 三级标题 */

h3 {
    border-bottom: #2b2b2b;
}

h3:before {
    content: "✒️ ";
}

h4 {}

h4:before {
    content: "✏️";
}

h5 {
    background-color: #f1f1f1;
    border-left: 5px solid #fff;
    padding-left: 5px !important;
    box-shadow: -3px 0px #205792;
}

h6 {
    border-left: 5px solid rgba(0, 0, 0, 0);
    box-shadow: 0px 2px #205792;
}
img{
    width:95%;
    margin: 5px auto 8px auto !important;
    border-radius: 5px;
    box-shadow:3px 2px 3px #ccc ;
}
strong{
  color:#ff4c00 !important;
}
em{ 
  font-weight:800;
  font-style:normal !important;
}

标签:3px,MarkDown,VsCode,auto,样式,important,5px,font,border
From: https://www.cnblogs.com/MrFlySand/p/16955769.html

相关文章

  • 修改NexT8.x主题全局样式
    1.全局样式设置在source文件夹下新建.styl结尾的文件,我的是variables.styl,代码如下:$body-bg-color=#eee;$content-bg-color=#fff;$card-bg-color=#f5f5f5;$tex......
  • vscode连接远程服务器的指定虚拟环境
    ctrl+shift+p选择的编译器将是下次打开vscode连接远程服务器的初始虚拟环境例如这里我选择了tesgnn这项(conda虚拟环境),再新建远程服务器连接,初始界面就是这样的:上面命......
  • W11中使用VScode远程开发之宝塔用户自动登录
    宝塔面板开启ssh,加密方式选择rsa下载秘钥,放值目录:C:\Users\本机用户\.ssh修改该目录下的config文件Host111.112.113.114HostName111.112.113.114UserrootF......
  • vscode如何设置为左边编辑器右边浏览器
      插件过时了?  参考:https://www.cnblogs.com/wan520/p/14259240.html......
  • Windows下使用vscode连接Linux服务器进行C++代码运行与调试
    参考链接:vscode+SSH配置https://blog.csdn.net/irober/article/details/112724986launch.json+tasks.json配置https://blog.csdn.net/jackuylove/article/deta......
  • wps word 批量修改表格样式
    https://www.ngui.cc/el/1276218.html?action=onClick Sub统一表格样式()''批量修改表格Macro'宏由zsz录制,时间:2020/05/07'DimtempTableAsTable......
  • 网站首页黑白灰色样式
    <style>html{-webkit-filter:grayscale(100%);/*webkit*/-moz-filter:grayscale(100%);/*firefox*/-ms-filter:grays......
  • Vue.js:v-charts根据E-charts修改样式
    以饼状图为例子:首先importimportVeRingfrom'v-charts/lib/ring'在<template>加上<ve-ring><ve-ringstyle="background:#F9F9F9":data="chartDataRing":sett......
  • Vscode环境配置-C,C++环境配置
    前言Vscode一直是我非常喜欢的编辑器,认识它是因为要接一些前端的工作来维持生活,检索JavaScript编辑器的时候找到了它用了很久,自我感觉比一些臃肿的IDE要强很多最近闲......
  • React团队开发-样式冲突
    Cssmodule在React多人开发中css中的类肯定会发生冲突如果每个页面的样式文件加上.module(文件名.module.scss)那么就会避免冲突(原理是将模块的类和id后面会随机生成一......