• 博客园Markdown编辑模式下代码高亮及复制功能


    页面定制CSS代码:(复制按钮在鼠标移动到代码块上显示,鼠标移出后按钮不显示)

    复制功能

    .cnblogs-markdown pre{position:relative}.cnblogs-markdown pre>span{position:absolute;top:0;right:0;border-radius:2px;padding:0 10px;font-size:12px;background:rgba(0,0,0,0.4);color:#fff;cursor:pointer;display:none}.cnblogs-markdown pre:hover>span{display:block}.cnblogs-markdown pre>.copyed{background:#67c23a}
    

    高亮功能

    pre{white-space:pre;word-wrap:normal}.cnblogs-markdown .hljs{display:block;overflow-x:auto;padding:.5em;background:#23241f!important;color:#FFF;white-space:pre;word-break:normal}.hljs,.hljs-tag,.hljs-subst{color:#f8f8f2}.hljs-strong,.hljs-emphasis{color:#a8a8a2}.hljs-bullet,.hljs-quote,.hljs-number,.hljs-regexp,.hljs-literal,.hljs-link{color:#ae81ff}.hljs-code,.hljs-title,.hljs-section,.hljs-selector-class{color:#a6e22e}.hljs-strong{font-weight:bold}.hljs-emphasis{font-style:italic}.hljs-keyword,.hljs-selector-tag,.hljs-name,.hljs-attr{color:#f92672}.hljs-symbol,.hljs-attribute{color:#66d9ef}.hljs-params,.hljs-class .hljs-title{color:#f8f8f2}.hljs-string,.hljs-type,.hljs-built_in,.hljs-builtin-name,.hljs-selector-id,.hljs-selector-attr,.hljs-selector-pseudo,.hljs-addition,.hljs-variable,.hljs-template-variable{color:#e6db74}.hljs-comment,.hljs-deletion,.hljs-meta{color:#75715e}function echo(stringA,stringB){var hello="你好";alert("hello world")}
    

    页脚HTML代码:显示复制功能文字

    <script src="https://cdn.bootcss.com/clipboard.js/2.0.4/clipboard.min.js"></script>
    <script src="https://blog-static.cnblogs.com/files/wuliytTaotao/cp.js"></script>
    

    PS:记得申请JS权限。

    侧边栏公告:添加行号

    Language:  text
    <script src="//cdn.jsdelivr.net/npm/highlightjs-line-numbers.js@2.6.0/dist/highlightjs-line-numbers.min.js"></script>
    <script>
    hljs.initHighlightingOnLoad();
    hljs.initLineNumbersOnLoad();
    </script>
    

    如何添加代码块?

    ```你代码用的什么语言```例如:```shell内容```
    ```如果你写的是shell以外的语言就不会渲染高亮了,如果不加shell会自动高亮,性能消耗严重。
  • 相关阅读:
    The Chinese Postman Problem HIT
    Chinese Postman Problem Aizu
    矩阵游戏 HYSBZ
    最大获利 HYSBZ
    asp.net+MVC--1
    -----IT男生涯————初始篇
    Permutation
    RMQ with Shifts
    Fast Matrix Operations
    "Ray, Pass me the dishes!"
  • 原文地址:https://www.cnblogs.com/pengpengboshi/p/13414025.html
Copyright © 2020-2023  润新知