公众号自定义mac命令行代码风格样式

最新推荐文章于 2024-06-16 19:09:51 发布

北京阿奇

最新推荐文章于 2024-06-16 19:09:51 发布

阅读量647

点赞数

文章标签：公众号排版 mac命令行样式排版代码排版

本文链接：https://blog.csdn.net/zzx410527/article/details/133083417

版权

一直看别人的公众号发的文章的代码排版是这样的风格：mac命令行风格样式 file

看着很有逼格的样子，今天也尝试学习写了一下没想到成功了记录一下首先感谢一个网站：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码农指南欢迎关注扫码_搜索联合传播样式-标准色版.png

本文由博客一文多发平台 OpenWrite 发布！

北京阿奇

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
公众号自定义mac命令行代码风格样式

后补：最开始没有注意，其实在google浏览器中就可以看到pre::before样式。md网站的样式在哪里呢点击一键排版就会出来样式选中左边代码块样式，自己编辑自己想要的样式。一直看别人的公众号发的文章的代码排版是这样的风格：mac命令行风格样式。但是代码块最原始的样子长这样，而且看了好多主题样式，不是我想要的样式，我这个样式就是基于大佬们的模版改了一些自己想要的样式。本着开源的精神，我把我调整完成的样式也放出来，的编辑器代码块有这个样式，那还不快点行动起来。主要的代码就是上面红框的部分。
复制链接

扫一扫