html实现CSDN代码片（代码块的做法）的显示

最新推荐文章于 2024-03-25 22:14:36 发布

Chuck Robert

最新推荐文章于 2024-03-25 22:14:36 发布

阅读量7.9k

点赞数 9

分类专栏：代码块 html 文章标签： html5 javascript css3

本文链接：https://blog.csdn.net/chuck_robert/article/details/118467038

版权

html 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

代码块

1 篇文章 0 订阅

订阅专栏

html实现CSDN代码片（代码块的做法）的显示

介绍
啰嗦
制作过程
效果图片
代码
注意
- 如何修改语言

介绍

我是一个初中生，自学的html，有一些东西不会，所以提前说，避免遭到某些人的吐槽。

啰嗦

前几天突发奇想，想写属于自己的blog，对比了需要大佬的blog发现我需要一个可以呈现出代码的部分，于是我智障得直接 把代码输入在了div中 ，结果可想而知。

制作过程

后来在谷歌上寻找了很多方法，答案基本只有三种1、无法使用，2、太丑3、不是想要的东西。后来我凭借着“惊人”的智商，在博客园上抽取了一段简单的代码，然后经过调色、整理、修改、整理出的

效果图片

效果展示

代码

<!DOCTYPE html>
<head>
  <style>
    #cnblogs_post_body .cnblogs_code {
      /* background-color: rgba(152, 147, 147, 0.28); */
      /* border: 1px solid rgba(255, 251, 251, 0); */
      border-radius: 4px;
      color: #000;
      font-family: Courier New !important;
      font-size: 13px !important;
      margin: 5px 0;
      overflow: auto;
      padding: 5px;
    }
    .hljs-built_in,
    .hljs-keyword,
    .hljs-name,
    .hljs-selector-tag,
    .hljs-tag {
      color: #332870 !important;
    }

    .hljs-emphasis,
    .hljs-strong {
      color: #a8a8a2 !important;
    }
    .hljs-built_in,
    .hljs-keyword,
    .hljs-name,
    .hljs-selector-tag,
    .hljs-tag {
      color: #bababa !important;
    }

    .hljs-bullet,
    .hljs-link,
    .hljs-literal,
    .hljs-number,
    .hljs-quote,
    .hljs-regexp {
      color: #27c94a !important;
    }

    .hljs-code,
    .hljs-selector-class {
      color: #eeff00 !important;
    }

    .hljs-emphasis {
      font-style: italic !important;
    }

    .hljs-attribute,
    .hljs-keyword,
    .hljs-name,
    .hljs-section,
    .hljs-selector-tag,
    .hljs-variable {
      color: #00c3ff !important;
    }

    .hljs-attr,
    .hljs-params {
      color: #b9b9b9 !important;
    }

    .hljs-string {
      color: #ffbb00 !important;
    }

    .hljs-addition,
    .hljs-built_in,
    .hljs-builtin-name,
    .hljs-selector-attr,
    .hljs-selector-id,
    .hljs-selector-pseudo,
    .hljs-subst,
    .hljs-symbol,
    .hljs-template-tag,
    .hljs-template-variable,
    .hljs-title,
    .hljs-type {
      color: #dfe231 !important;
    }

    .hljs-comment,
    .hljs-deletion {
      color: #008839 !important;
    }

    .hljs-meta {
      color: #00ff0d !important;
    }
    #cnblogs_post_body .toc ul {
      max-height: 550px;
      overflow-y: auto;
    }

    .cnblogs-markdown .hljs {
      display: block;
      overflow-x: auto;
      padding: 0.5em !important;
      background: #2b2b2b !important;
      font-size: 14px !important;
      color: #bababa !important;
      font-family: Source Code Pro, Consolas, Menlo, Monaco, Courier New,
        monospace !important;
    }
    #cnblogs_post_body h1::before {
      content: "H1";
      margin-right: 10px;
      color: gainsboro;
    }
    #cnblogs_post_body h2::before {
      content: "H2";
      margin-right: 10px;
      color: gainsboro;
    }
    #cnblogs_post_body h3::before {
      content: "H3";
      margin-right: 10px;
      color: gainsboro;
    }
    #mainContent #post_detail #cnblogs_post_body h4::before {
      content: "h4";
      margin-right: 10px;
      color: gainsboro;
    }
    #cnblogs_post_body h5::before {
      content: "h5";
      margin-right: 10px;
      color: gainsboro;
    }
    #cnblogs_post_body h6::before {
      content: "h6";
      margin-right: 10px;
      color: gainsboro;
    }
    #cnblogs_post_body td.hljs-ln-numbers {
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;

      text-align: center;
      color: #ccc;
      border-right: 1px solid #ccc;
      vertical-align: top;
      padding-right: 5px;

      /* your custom style here */
    }

    #cnblogs_post_body .hljs td {
      border-collapse: inherit;
      min-width: unset;
      padding-left: 20px;
      padding-right: 10px;
    }
  </style>
</head>
<body>
  <div id="cnblogs_post_body" class="blogpost-body cnblogs-markdown">
    <pre>
            <code class="language-css">/* your custom style here */
#cnblogs_post_body h6::before {
    content: "h6";
    margin-right: 10px;
    color: gainsboro;
}
@font-face {
	font-family: "EBG12-Re";
    src: url("fonts/EBGaramond12-Regular.ttf") format("truetype");
}
            </code>
        </pre>
  </div>
  <div id="cnblogs_post_body" class="blogpost-body cnblogs-markdown">
    <pre>
            <code class="language-python">import pandas                     #导入数据统计模块
data = {'A': [1,2,3,4,5],'B': [6,7,8,9,10],'C': [11,12,13,14,15]}
data__frame = pandas.DataFrame(data)
print(data__frame)
            </code>
        </pre>
  </div>
  <div id="cnblogs_post_body" class="blogpost-body cnblogs-markdown">
    <pre>
            <code class="language-c">我好像不会c语言
            </code>
        </pre>
  </div>
  <div>
    <script src="https://common.cnblogs.com/highlight/10.3.1/highlight.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/highlightjs-line-numbers.js/2.8.0/highlightjs-line-numbers.min.js"></script>
    <script type="text/javascript">
      hljs.initHighlightingOnLoad();

      hljs.initLineNumbersOnLoad();

      $(document).ready(function () {
        $("code.hljs").each(function (i, block) {
          hljs.lineNumbersBlock(block);
        });
      });
    </script>
  </div>
</body>

注意

颜色可以自定义style中有对应的颜色，运用vscode可以快速改变高亮颜色
里面有一些比较重要的东西，例如符号< >，因为如果直接输入这些会出现问题，所以需要替换的表格如下
因为字符原因无法提示，所以用图片
如果文档内字符太多，可以在 在线免费转义进行转换，
目前测试成功的语言是HTML、CSS、Javascript、C语言、Python。其他还没有测试，没有测试并不代表不会成功。

如何修改语言

在

<code class="language-c">我好像不会c语言</code>

处修改，例如c语言，就将languge-c，如果是python，就改为language-python
修改如下表

语言	对应英文
python	python
javascript	JS
css	CSS
c语言	c
java	java

没有提到的语言可以自己试一试，尽量用英文，只有语言全称或者缩写，大小写可以自己测试

Chuck Robert

关注

9
点赞
踩
29

收藏

觉得还不错? 一键收藏
4
评论
html实现CSDN代码片（代码块的做法）的显示

html实现CSDN代码片（代码块的做法）的显示介绍啰嗦制作过程效果图片代码注意如何修改语言介绍我是一个初中生，自学的html，有一些东西不会，所以提前说，避免遭到某些人的吐槽。啰嗦前几天突发奇想，想写属于自己的blog，对比了需要大佬的blog发现我需要一个可以呈现出代码的部分，于是我智障得直接把代码输入在了div中，结果可想而知。制作过程后来在谷歌上寻找了很多方法，答案基本只有三种1、无法使用，2、太丑3、不是想要的东西。后来我凭借着“惊人”的智商，在博客园上抽取了一段简单的代码，
复制链接

扫一扫