首页新闻招聘找找看知识库
  • 博客园团队
    2018-11-06 20:13 博客园团队

    @bobliao
    您好,请问您指的是博客内容代码块显示吗?

    第1楼 回到顶楼
  • EndlessCoding
    2018-11-06 20:20 EndlessCoding
    @博客园团队
    用markdown写出的代码块,没有行号,显示,样式也比较单一。如果可以的话,建议出一个js代码的例子,教我们这些不太会js的人,写下js,用来更改代码的样式
    第2楼 回到顶楼
  • 博客园团队
    2018-11-07 11:00 博客园团队

    @bobliao @ EndlessCoding
    您好,您可以到 highlight.js 下载您喜欢的样式,将对应的 cssjs上传到您个人的站点文件 ,然后在个人博客后台设置中页首html添加如下代码:

    <link rel="stylesheet" href="https://cdn.staticfile.org/highlight.js/9.13.1/styles/monokai.min.css">
    <script src="https://cdn.staticfile.org/highlight.js/9.13.1/highlight.min.js"></script>
    <script>hljs.initHighlightingOnLoad();</script>

    这里使用cdn请替换成您上传的cssjs,这里使用了monokai风格的代码高亮。请按照这个参考自定义自己的代码高亮吧!

    第3楼 回到顶楼
  • bobliao
    2018-11-07 19:10 bobliao
    @博客园团队
    你好!这样替换即使选了暗色背景,代码块背景也不是黑色的啊
    第4楼 回到顶楼
  • 博客园团队
    2018-11-07 20:22 博客园团队

    @bobliao
    您好,代码块的背景颜色,您可以 F12 查看浏览器,在个人博客后台设置中 通过 css 进行控制。找到样式

    .cnblogs-markdown .hljs {
        ...
        background: #282c34!important;
        ...

    进行修改即可。

    第5楼 回到顶楼
  • EndlessCoding
    2018-11-09 18:10 EndlessCoding
    @博客园团队
    按您的方法确实可以更改风格,但是不知如何添加行号和实现复制按钮的功能,您能简单说明一下么
    第6楼 回到顶楼
  • 乾坤刀
    2018-11-10 13:44 乾坤刀
    @EndlessCoding
    你好,复制功能可以试试我写的这段js复制功能
    第7楼 回到顶楼
  • 博客园团队
    2018-11-11 12:48 博客园团队

    @EndlessCoding
    您好,代码行号显示,您可以参考这篇博文。优化博客园Markdown样式(代码行号、版权信息、章节目录等)

    第8楼 回到顶楼
登录后才能评论,请先登录注册