一直看别人的公众号发的文章的代码排版是这样的风格:mac命令行风格样式
看着很有逼格的样子,今天也尝试学习写了一下 没想到成功了 记录一下 首先感谢一个网站:http://md.aclickall.com/ 一个专门让程序员写技术文章排版用的 我这个样式就是基于大佬们的模版改了一些自己想要的样式 网站打开是这样的:
我这里用的是dark主题:
但是代码块最原始的样子长这样,而且看了好多主题样式,不是我想要的样式,
于是自己下手开始实现自己的样式: 怎么实现呢,无头绪, 偶然的机会看到掘金的编辑器代码块有这个样式,那还不快点行动起来
利用我刚学的前端知识用起来
1、选中网页代码块红黄蓝部分,右键找到 「检查」点击出来下面的图 查看源码方式看看这个样式位置,如下图所示:
原来是pre::before标签的样式 接下来就是找这个样式了 方式一、掘金编辑器在工具栏有一个切换主题,最下面是贡献主题: 点击进入到所有主题的贡献者页面:https://github.com/xitu/juejin-markdown-themes 这里感谢开源 我用的主题是geek-black主题:
地址:https://github.com/MageeLin/juejin-markdown-theme-geek-black 找到geek-black.scss文件 搜一下我们刚才看到的样式pre::before
方式二: 后补:最开始没有注意,其实在google浏览器中就可以看到pre::before样式。方式一让大家走弯路了。
终于找到了。 把before部分拷贝出来,放到http://md.aclickall.com 的样式中 md网站的样式在哪里呢 点击一键排版 就会出来样式 选中左边代码块样式,自己编辑自己想要的样式
编辑完成后点击保存:
主要的代码就是上面红框的部分。再加上一些微调 最后效果就是这样了。不错就是我想要的样式。nice
本着开源的精神,我把我调整完成的样式也放出来,
/*
可任意修改样式,或恢复预设值,保存后生效
相对“默认样式”而作的修改会用 红色 标注
你甚至可以修改代码块高亮的样式,请往下看会找到红色说明要修改的部分!
*/
.output_wrapper/*此属性为全局*/
{
font-size: 16px;
color: #3e3e3e;
line-height: 1.6;
word-spacing:0px;
letter-spacing:0px;
font-family: "Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif;
}
.output_wrapper *
{
font-size: inherit ;
color: inherit;
line-height: inherit;
margin:0px;
padding:0px;
}
p {/*段落*/
margin: 1.5em 0px;
}
h1,h2,h3,h4,h5,h6 {
margin: 1.5em 0px;
font-weight:bold;
}
h1 {
font-size: 1.6em ;
}
h2 {
font-size: 1.4em;
}
h3 {
font-size: 1.3em;
}
h4 {
font-size: 1.2em;
}
h5 {
font-size: 1em;
}
h6 {
font-size: 1em;
}
ul, ol {
padding-left: 32px;
}
ul{ /*无序列表*/
list-style-type: disc;
}
ol { /*有序列表*/
list-style-type: decimal;
}
li *
{
/* color: #3e3e3e;*/
}
li{ /*在公众号下,改变不了li符号的属性(如颜色),并会影响其子元素的属性;而在其它博客平台中,则能正常使用*/
margin-bottom: 0.5em;
/* color:#159957; */
}
.code_size_default /*代码块默认size*/
{
line-height: 18px;
font-size: 14px;
font-weight:normal;
word-spacing:0px;
letter-spacing:0px;
}
.code_size_tight /*代码块紧凑size*/
{
line-height: 15px;
font-size: 11px;
font-weight:normal;
word-spacing:-3px;
letter-spacing:0px;
}
pre code /*代码块*/
{
font-family: Consolas, Inconsolata, Courier, monospace;
border-radius: 0px;
}
/** 红黄蓝三个小点就是在这里修改 */
pre:before {
content: '';
display: block;
height: 30px;
width: 100%;
background: url(data:image/png;base64,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)
10px 10px no-repeat;
border-radius: 3px 3px 0px 0px;
background-color: rgb(33, 33, 34);
box-shadow: 0 0 8px rgba(110, 110, 110, 0.45);
background-size: 40px;
}
blockquote { /*引用块*/
display: block;
padding: 15px 1rem;
font-size: 0.9em;
padding-right: 15px;
margin: 1em 0;
color: #819198;
border-left: 6px solid #dce6f0;
background: #f2f7fb;
overflow: auto;
overflow-scrolling: touch;
word-wrap: normal;
word-break: normal;
}
blockquote p {
margin: 0px;
}
a { /*超链接*/
text-decoration: none;
color: #1e6bb8;
word-wrap:break-word;
}
strong /*强调*/
{
font-weight: bold;
}
em /*斜体*/
{
font-style:italic;
}
del /*删除线*/
{
font-style:italic;
}
strong em/*强调的斜体*/
{
font-weight: bold;
}
hr { /*分隔线*/
height: 1px;
margin: 1.5rem 0px;
border: none;
border-top: 1px dashed #A5A5A5;
}
code /*行内代码*/
{
word-wrap: break-word;
padding: 2px 4px;
border-radius: 4px;
margin:0 2px;
color:#e96900;
background:#f8f8f8;
}
img
{
display: block;
margin:0 auto; /*图片水平居中*/
/* margin:0 0; */ /*图片水平居左,如需要请打开*/
max-width:100%;
}
figcaption/*图片描述文字*/
{
margin-top:10px;
text-align:center;
/* text-align:left; */ /*当图片水平居左时,请打开*/
color:#999;
font-size: 0.7em;
}
/*================表格开始================*/
table
{
display:table;
width: 100% ;
text-align: left;
}
tbody {
border: 0;
}
table tr {
border: 0;
border-top: 1px solid #CCC;
background-color: white;
}
/*隔行改变行的背景色,如需要请打开*/
/*
table tr:nth-child(2n) {
background-color: #F8F8F8;
}
*/
table tr th, table tr td {
font-size: 1em;
border: 1px solid #CCC;
padding: 0.5em 1em;
text-align: left;
}
/*表头的属性*/
table tr th {
font-weight: bold;
background-color: #F0F0F0;
}
/*================表格结束================*/
/*================数学公式开始================*/
.katex-display {/*块公式*/
font-size:1.22em;
}
.katex
{/*行内公式*/
padding:8px 3px;
}
.katex-display > .katex
{/*块公式*/
display:inline-block;
text-align:center;
padding:3px;
}
.katex img
{/*行内公式对应的图片*/
display:inline-block;
vertical-align:middle;
}
/*================数学公式结束================*/
a[href^="#"] sup
{/*注脚*/
vertical-align:super;
margin:0 2px;
padding:1px 3px;
color: #ffffff;
background:#666666;
font-size:0.7em;
}
/*================任务列表开始================*/
.task-list-list {
list-style-type: none;
}
.task-list-list.checked {/*已完成*/
color: #3e3e3e;
}
.task-list-list.uncheck {/*未完成*/
color: #bfc1bf;
}
.task-list-list .icon_uncheck, .task-list-list .icon_check {
display: inline-block;
vertical-align: middle;
margin-right: 10px;
}
.task-list-list .icon_check:before
{/*已完成*/
content: "√";
border: 2px solid #3e3e3e;
color:red;
}
.task-list-list .icon_uncheck:before
{/*未完成*/
content: "x";
border: 2px solid #bfc1bf;
color: #bfc1bf;
}
.task-list-list .icon_check:before, .task-list-list .icon_uncheck:before
{/*标志框*/
padding:2px;
padding-left: 5px;
padding-right: 8px;
border-radius:5px;
}
/*================任务列表结束================*/
.toc
{/*总目录*/
margin-left:25px;
}
.toc_item
{/*每条目录*/
display:block;
}
.toc_left
{/*每级目录的缩进*/
margin-left:25px;
}
/*
从这一行开始,为代码的高亮样式部分,
你可以把下面的定义为你想要的代码高亮样式,在此样式下,会固定用你下面的代码高亮样式,而菜单的“代码样式”不再有效
*/
pre code/*增加代码的border*/
{
border-radius: 0px 0px 3px 3px;
border-color: rgb(204, 204, 204);
margin: 0;
}
pre code .linenum/*显示代码行数对应的样式*/
{
padding-right:20px;
word-spacing: 0px;
}
.hljs { /*代码块高亮的全局属性*/
color: #a9b7c6;
background: #282b2e;
display: block;
overflow-x: auto;
}
.hljs-params
{
color: #ff9823;
}
.hljs-number,
.hljs-literal,
.hljs-symbol,
.hljs-bullet {
color: #AE87FA;
}
.hljs-function,
.hljs-built_in,
.hljs-name,
.hljs-keyword,
.hljs-selector-tag,
.hljs-deletion {
color: #f82375;
}
.hljs-variable,
.hljs-template-variable,
.hljs-link {
color: #629755;
}
.hljs-comment,
.hljs-quote {
color: #808080;
}
.hljs-meta {
color: #5bdaed;
}
.hljs-string,
.hljs-attribute,
.hljs-addition {
color: #eedc70;
}
.hljs-attr,
.hljs-section,
.hljs-title,
.hljs-type {
color: #a5da2d;
}
.hljs-selector-class
{
color: #a5da2d;
}
.hljs-name,
.hljs-selector-id,
{
color: #f92672;
}
.hljs-emphasis {
font-style: italic;
}
.hljs-strong {
font-weight: bold;
}
写着么详细,你学废了吗?
我的公众号:AI码农指南 欢迎关注
本文由博客一文多发平台 OpenWrite 发布!