精华内容
下载资源
问答
  • 不过在之后的渲染使用过程中由于效果不是很好,所以重新改版,并借此机会添加复制代码功能。 本博客采用的后端是 node.js 框架 Express,在使用 markdown-it 渲染 md 文件的时候,选择在添加文章或者更新文章的时候...

    之前写过一篇关于代码块渲染添加自定义行号的文章:markdown-it和highlight.js的结合渲染代码,并添加自定义行号

    不过在之后的渲染使用过程中由于效果不是很好,所以重新改版,并借此机会添加复制代码功能。

    本博客采用的后端是 node.js 框架 Express,在使用 markdown-it 渲染 md 文件的时候,选择在添加文章或者更新文章的时候由 md 生成 html。

    代码块生成

    const md = new MarkdownIt({
      html: true,
      linkify: true,
      typographer: true,
      highlight: function (str, lang) {
        // 当前时间加随机数生成唯一的id标识
        const codeIndex = parseInt(Date.now()) + Math.floor(Math.random() * 10000000)
        // 复制功能主要使用的是 clipboard.js
        let html = `<button class="copy-btn" type="button" data-clipboard-action="copy" data-clipboard-target="#copy${codeIndex}">复制</button>`
        const linesLength = str.split(/\n/).length - 1
        // 生成行号
        let linesNum = '<span aria-hidden="true" class="line-numbers-rows">'
        for (let index = 0; index < linesLength; index++) {
          linesNum = linesNum + '<span></span>'
        }
        linesNum += '</span>'
        if (lang && hljs.getLanguage(lang)) {
          try {
            // highlight.js 高亮代码
            const preCode = hljs.highlight(lang, str, true).value
            html = html + preCode
            if (linesLength) {
              html += '<b class="name">' + lang + '</b>'
            }
            // 将代码包裹在 textarea 中
            return `<pre class="hljs"><code>${html}</code>${linesNum}</pre><textarea style="position: absolute;top: -9999px;left: -9999px;z-index: -9999;" id="copy${codeIndex}">${str.replace(/<\/textarea>/g, '&lt;/textarea>')}</textarea>`
          } catch (error) {
            console.log(error)
          }
        }
    
        const preCode = md.utils.escapeHtml(str)
        html = html + preCode
        // 将代码包裹在 textarea 中
        return `<pre class="hljs"><code>${html}</code>${linesNum}</pre><textarea style="position: absolute;top: -9999px;left: -9999px;z-index: -9999;" id="copy${codeIndex}">${str.replace(/<\/textarea>/g, '&lt;/textarea>')}</textarea>`
      }
    })
    

    前端

    前端实现代码选中的功能:

    import Clipboard from 'clipboard'
    
    export default {
      ...
      data () {
        return {
          ...
          clipboard: ''
        }
      },
      mounted () {
        this.$nextTick(() => {
          this.clipboard = new Clipboard('.copy-btn')
          // 复制成功失败的提示
          this.clipboard.on('success', (e) => {
            this.$message.success('复制成功')
          })
          this.clipboard.on('error', (e) => {
            this.$message.error('复制成功失败')
          })
        })
      },
      ...
      destroyed () {
        this.clipboard.destroy()
      }
    }
    

    自定义行号

    pre.hljs {
      padding: 12px 2px 12px 40px !important;
      border-radius: 5px !important;
      position: relative;
      font-size: 14px !important;
      line-height: 22px !important;
      overflow: hidden !important;
      code {
        display: block !important;
        margin: 0 10px !important;
        overflow-x: auto !important;
      }
      .line-numbers-rows {
        position: absolute;
        pointer-events: none;
        top: 12px;
        bottom: 12px;
        left: 0;
        font-size: 100%;
        width: 40px;
        text-align: center;
        letter-spacing: -1px;
        border-right: 1px solid rgba(0, 0, 0, .66);
        user-select: none;
        counter-reset: linenumber;
        span {
          pointer-events: none;
          display: block;
          counter-increment: linenumber;
          &:before {
            content: counter(linenumber);
            color: #999;
            display: block;
            text-align: center;
          }
        }
      }
      b.name {
        position: absolute;
        top: 2px;
        right: 50px;
        z-index: 10;
        color: #999;
        pointer-events: none;
      }
      .copy-btn {
        position: absolute;
        top: 2px;
        right: 4px;
        z-index: 10;
        color: #333;
        cursor: pointer;
        background-color: #fff;
        border: 0;
        border-radius: 2px;
      }
    }
    

    自定义行号主要使用的是CSS计数方面的知识,感兴趣可以查看 css计数器

    展开全文
  • 微信隐藏代码功能合集

    千次阅读 2016-10-12 21:43:51
    微信隐藏代码功能合集 微信还能这样玩
    1. 让微信底栏动起来,更贴合 Android Design: //switchtabpos
    2. 将微信聊天页和文章页多窗口显示 //multiwebview
    3. 查看当前聊天窗口消息数量 //checkcount
    4. 查看小视频参数 //sightinfo
    5. 直接调出「诊断网络」功能 //opentrace
    6. 手机信息查询 //getfpkey
    7. 定位当前位置 //pickpoi
    8. 退出微信 //fullexit
    9. 直接发送在微信界面的截图 图片所在位置的路径
    10.  打开诊断网络 //traceroute
    11. 上传记录  //uplog
    12. 显示当前网络情况 //netstatus
    13. 打开首屏窗口显示微信新功能介绍  //whatsnew
    14. 显示tbs信息 //gettbs
    15. 删除tbs信息 //deletetbs
    16. 清除游戏缓存 //clrgamecache
    17. 切换为腾讯地图 //sosomap
    18. 统计聊天记录的数量 //checkcount
    19. 内存释放 //dumpmemory
    20. 游戏消息 //gamemsg
    21. 开启或关闭voip调试功能 //voipfacedebug
    22.  添加下载任务 //adddownloadtask
    23. 查询下载任务,以url方式返回 //querydownloadtaskbyurl
    24. 清除下载任务 //removedownloadtask
    25. 暂停下载任务  //pausedownloadtask
    26. 重新下载 //resumedownloadtask
    27.  打开内部体验,下载 //testofflinedownloadtask
    28. 检查更新 //testupdate
    29. 打开或关闭sns的时间线调试状态 //debugsnstimelinestat



    把代码在发送框内写入并发送就可以出现效果,自己有空测试一下,这样也很好玩的。
    展开全文
  • python turtle代码功能详解一

    千次阅读 2019-08-03 08:31:40
    Turtle代码功能详解一 {forward()、pensize()、pencolor(‘’)、right()、left()} 1、 Pensize():控制画笔的尺寸 2、 pencolor(‘’):控制画笔的填充色 3、 turtle.forward():画笔向所指定方向前进指定的长度 4...

    Turtle代码功能详解一

    {forward()、pensize()、pencolor(‘’)、right()、left()}
    1、 Pensize():控制画笔的尺寸
    2、 pencolor(‘’):控制画笔的填充色
    3、 turtle.forward():画笔向所指定方向前进指定的长度
    4、 turtle.right():控制画笔方向指向右
    5、 turtle.left():控制画笔方向指向左
    example:
    imprt turtle #导入tuetle库
    pensize(5) #画笔的尺寸为5,若未指定fan方向,画笔默认向右

    pencolor(‘red’) #画笔的颜色为红色

    turtle.forward(100) #画笔以默认向右的方向绘制长度为100,尺寸为5,颜色为红色的横线

    turtle.left(90) #在原来的基础上,画笔向左调整90度

    turtle.forward(100) #画笔以向左90度的角度绘制长度为100,尺寸为5的横线

    turtle.left(90)#画笔向左再调整90度,经过两次向左调整90度之后,画笔在原来默认向右的基础上,一共调整了180度,完全指向左。
    turtle.forward(100)#沿着画笔的方向前进100

    turtle.left(90)#原理同上
    turtle.forward(100)#原理同上
    turtle.mainloop()(循环函数) #显示代码执行结果的python turtle graphics窗口在执行
    代码之后不会自动关闭,若没有此函数,代码执行之后,显示窗口绘制一遍图形之后自动关闭。

    注:
    1、 画笔方向默认向右
    2、 turtle.forward()和turtle.right()、turtle.left()搭配使用,turtle.right()和turtle.left()控制画笔的方向,turtle.forward()控制画笔的前进。
    3、 画笔调整的角度大小可以随意,按照自己的需求来。

    附录(示例全部代码)

    import turtle
    turtle.pensize(4)
    turtle.pencolor('red')
    turtle.forward(100)
    turtle.left(90)
    turtle.forward(100)
    turtle.left(90)
    turtle.forward(100)
    turtle.left(90)
    turtle.forward(100)
    turtle.mainloop()
    

    若有错误之处还请各位大神批评指正,谢谢!
    若有疑问请评论或者联系微信:wxid_61ph237m4jmi22
    QQ:917537377
    2019年8月3日星期六
    By jett

    展开全文
  • SublimeText自带格式化代码功能

    万次阅读 2016-12-03 15:58:04
    SublimeText自带格式化代码功能应该怎么使用呢? 这个功能被SublimeText命名为reindent,如果你使用了SublimeText汉化包的话叫做“再次缩进”,但是这种叫法说不通。 该选项的路径:Edit - Line - Reindent(中文...
    SublimeText自带格式化代码功能应该怎么使用呢?

    这个功能被SublimeText命名为reindent,如果你使用了SublimeText汉化包的话叫做“再次缩进”,但是这种叫法说不通。

    该选项的路径:Edit - Line - Reindent(中文路径则是:编辑 - 行 - 再次缩进)

    同时说明一下,该功能并不需要选中代码之后才能执行格式化功能,其默认是格式化整个文件里的代码。

    接下来就说到主题了,应该如何对该格式化代码功能进行快捷键组合的设置呢?

    1、首先通过以下路径打开用户按键绑定文件:

    Preferences → Key Bindings – User

    2、然后在其中添加以下代码(如果你有需要的话,其中的快捷键组合是可以自己定义的):

    {"keys": ["ctrl+shift+r"], "command": "reindent" , "args":
    {"single_line": false}}

    在这儿请注意每组快捷键组合包含着一个中括号里面,通过大括号定义一组快捷键,然后通过英文逗号进行分隔,具体可参考下图:


    本文到这儿就结束了吗?不,下面说下如果SublimeText自带的格式化代码不适合用在你所使用的语言(比如SQL、Ruby等)的话,你可以通过插件的方式进行配置,具体请看下述操作:

    1、以下内容基于已经你已经在你的SublimeText中安装了package control(教程在本站有);

    2、通过快捷键组合ctrl+shift+P唤出命令面板

    3、在面板中输入“install package”后回车

    4、接着输入“format”(即格式化的意思),在弹出的列表中找到对应你所想要进行格式化操作的语言,
    展开全文
  • VisualStudio(VS)的自动补全代码功能消失解决办法代码补全功能很实用,当你码代码是输入一个常见的关键字时它会自动出现出现一个常见的关键字列表,如输入#include时,你刚输入#incl下面就会出现include的选项。...
  • Edge Boxes论文浅读和EdgeBoxes Matlab代码功能函数浅析

    万次阅读 热门讨论 2016-05-15 23:02:43
    Edge Boxes的Matlab代码功能函数说明Edge Boxes的Matlab代码托管在Github上:https://github.com/pdollar/edges 本文旨在记录其各函数的功能说明,这部分说明在Contents.m中有记录! 原文如下: Structured ...
  • VSCode格式化代码功能失效的bug解决方法 前不久我装上了黑苹果,那么为了快速转移开发环境,我使用了VSCode(Visual Studio Code下面简称VSCode)的插件Settings Sync来同步个人设置和其他常用插件,如果不熟悉...
  • Oracle 设置 设置PL/SQL的联想代码功能

    千次阅读 2018-07-14 12:46:49
    设置PL/SQL的联想代码功能 Tools&gt;Preferences(可以按Shift+P,快速定位)&gt;左侧User Interface&gt;右侧 Delay(ms)是联想延迟时间:设置为100ms Minimum characters是多少字母开始联想:设置为1 &...
  • 网页中对代码的处理,代码高亮插件SyntaxHighlighter》(点击打开链接)已经提及到,国内著名,完美兼容IE6的富文本编辑器UEditor已经自然整合代码高亮插件SyntaxHighlighter插件了,那么如何实现用户贴代码功能呢?...
  • 如果你觉得webstorm速度太慢,只从事简单的html编写又追求速度Geany是个很好的选择,默认支持代码折叠,和匹配tag高亮(内有插件实现),美中不足的是没有自动格式化代码功能,我现在调用他的编译命令行功能和发送当前文本...
  • pycharm提示代码功能问题

    千次阅读 2018-06-23 16:19:09
    在使用pycharm写python代码时,对于tensorflow模块,不能显示代码提示内容。在project中设置解释器地址后, 要等待下面列出的package包全部扫描完,显示完当前版本和最新版本完,再点OK按钮。在代码区输入相关类的...
  • 一般编辑器都会自带自动补全代码功能,比如:webstrom、hbuild。但vscode想要自动补全代码功能就要下载插件。下面就演示实现这种功能的方法: 打开vscode,在扩展那里搜索 HTML Snippets 插件并安装 重启...
  • IDLE python添加自动提示代码功能

    万次阅读 2018-11-30 17:37:30
    参考: ...1、进入Python目录:\Python27\Lib\idlelib\ 在目录下找到“config-extensions.def”文件 2,打开后修改等待时间如下: 3、打开AutoComplete.py文件修改提示模块 如下: import urllib ...
  • SublimeText 自带格式化代码功能

    万次阅读 2017-12-22 23:26:43
    sublime自身就有格式化命令,只是需要设置快捷键 位置在[Preferences]->[Key Bindings]->[User...弹出的页面中,添加如下代码,为其设置快捷键:Ctrl+Shift+r [ { "keys": ["ctrl+shift+r"], "command": "rein
  • 在Visual Studio 2008补全代码功能

    千次阅读 2016-11-22 15:54:06
    步骤: 1、安装Visual Assist X http://jingyan.baidu.com/article/7082dc1c73e575e40a89bdc7.html 2、每次输入代码的时候将会提示 3、没有提示,补全代码快捷键为:CTRL+J
  • Sublime Text2配置运行Python代码功能

    千次阅读 2016-12-05 21:49:11
    最近开始学习Python了,使用的Sublime Text2作为代码编辑工具,由于Python是解释型脚本语言,不需要编译就可以解释执行,所以可以在Sublime Text2中配置直接运行Python代码功能,下面是步骤: 1、安装Python(这个...
  • 我们老板指定要用iH5来做一个图片的应用,需要嵌入一些算法来过滤图片,但是我不知道如何嵌入?另外,还需要接我们自身的数据库,把积分系统给接进去。不知道哪位大牛知道如何使用这个功能?急急急
  • Editplus自动补齐代码功能

    千次阅读 2010-05-26 23:24:00
    不过用Editplus编辑php没有自动补齐代码功能。有时就不太方便。那么如何实现自动补齐功能呢?   其实在EditPlus目录下有.acp 文件,这种文件就是自动补齐代码的文件。一般Editplus安装好后有java.acp 、 perl
  • 为eclipse查看源代码功能

    千次阅读 2009-03-31 22:53:00
    Eclipse中有这样一个功能,就是在编写程序的时候,按住Ctrl键不松手,这时用鼠标去点击某个方法或者类,就会看到该方法或类的源代码。可是我今天下载了最新的Eclipse3.2和JDK5.0并安装之后,发现该功能并不能使用,...
  • 本文主要学习自网上各路大神后做的笔记、Demo,现整理至CSDN博客,主要有鸿洋_、郭霖、Carson_Ho、aqi00 等大神。 问题原因 升级了Android Studio ,版本号大于3.2 ,默认创建项目使用AndroidX;...
  • gredit编辑器是Ubuntu16.0自带的编辑器,但是该编辑器没有自动补齐功能。所以,博主想要跟Windows下开发一样,有自动补齐功能。经过搜索,博主发现其实很简单,只要在终端输入下面命令,并且勾上下图中的Word ...
  • 编号 代码 命令分解 命令 1 //switchtabpos switch tab pos 更改底部功能按钮位置的命令 2 //multiwebview multi web view 微信多窗口显示命令 3 //opentrace open trace 打开跟踪(到底是跟踪什么呢?) 4 //getfpkey ...
  • 最近,微信上线了一个彩蛋小功能「拍一拍」,虽然低调发布,但还是冲上了热搜。这个功能的操作很简单,双击好友头像,好友头像会震动,并显示一条灰色消息,提醒好友被你“拍了拍”。「拍一拍」不仅...
  • 一行 Python 代码能实现什么丧心病狂的功能

    万次阅读 多人点赞 2019-07-19 10:57:09
    你在 python 使用过程中用一行代码实现过哪些激动人心的功能呢?欢迎留言讨论。手头有 109 张头部 CT 的断层扫描图片,我打算用这些图片尝试头部的三维重建。基础工作之一,就是要把这些图片数据读出来,织成一个三...
  • 昨天实现了一些codemirror:基本的编辑代码功能、插入变量功能、codemirror语法验证功能、代码格式化(由于主要是json数据,所以暂时没引用其他组件,如果需要建议引用js-beautify,因为查资料发现codemirror在新的...
  • Mac系统下Eclipse代码联想功能代码助手,代码提示)快捷键 Eclipse for mac 代码提示(代码助手,代码联想)快捷键修改 一、每次输入都自动提示 点击Eclipse,使其成为第一响应者,preferences->Java->...
  • pycharm中代码补全,代码提示功能

    万次阅读 2017-09-30 15:13:13
    那什么,,,,,,是这样的,请先确保你的代码补全功能是打开的。打开操作方式是:file---->power save mode,把这个前面的√号去掉即可。 然后,代码在提示的时候,多打几个字,发现你想要的已经在最上面的时候...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 581,713
精华内容 232,685
关键字:

代码功能