Coding远程代码标签

跳过不看

翻 github 的时候，看到 github 能够直接在 issue 或者 discussion 中把代码的 permalink 直接用内嵌展示，哇优雅实在是优雅。这不一下子想到之前改过的 coding 标签，能在博客里面内嵌远程代码，虽然他的功能没有什么大碍，但是不能像 github 一样展示特定行数一直有些遗憾。So，今儿给他加上，顺便附上整个 Add coding 的教程。

Deploy

首先就得请出我们的大善人 Vercel ，点击下面的一键部署

或者你也可以 clone 我的仓库部署到 Vercel

再或者，你可以不用部署直接用我的服务（我的网站没人看，所以不会产生多少流量的（大概？）：https://codehightapi.vercel.app/

vercel.app域名被墙了喔（小声）

增加配置

代码未写，配置先行

######## Tag Plugins ########
tag_plugins:
  # {% coding %}
  coding:
    api: https://codehightapi.vercel.app/

配置好 api 后引入 coding.js 脚本

# 内置服务，按需加载（页面内用到了就会加载，没有用到就不会加载）
data_services:
  coding:
    js: /js/services/coding.js

改动主题文件

接下来就要动主题文件了，要是怕后续更新出现兼容问题的话，你就，你就，摆烂吧

注册插件

先注册一下 hexo 插件

// data
hexo.extend.tag.register('coding', require('./lib/coding')(hexo))

构建脚本

然后就开始写本地的构建脚本啦，把它放到 theme/stellar/scripts/tags/lib/coding.js 中

客户端脚本

客户端脚本用来获取页面上的 ds-coding 元素并且调用 api 将返回的代码填充到元素之中。

位于 theme/stellar/source/js/services/coding.js

这样就完成啦！（你以为我会这么说么！

copycode

确实是完成了哈哈，脚本没什么问题已经能用了，but这里有一个🤏小小的问题，插入进来的 coding 远程代码主题是没有注入 copycode 功能的！虽然我不用，但是不能没有

So，我们需要调整一下 copycode 的js代码

How to Use

这回是真的 over 啦，你已经可以在写文章使用 {% coding %} 标签了，写法如下

{% coding https://xxx[#L1-L12] [lang:lang] [withcss:true] %}

url: #L1-L2 # 你可以在代码链接后面指定获取的代码行
lang: js # 指定远程代码的语言，不指定也会根据文件后缀自动识别
withcss: true # 默认为true，可选false，选择是否引入Tun888的代码高亮css

预览

{% coding https://raw.githubusercontent.com/xxx/copycode.js %}

指定显示1-12行的代码
{% coding https://raw.githubusercontent.com/xxx/copycode.js#L1-L12 %}

指定显示第二行的代码并手动指定代码语言为js
{% coding https://raw.githubusercontent.com/xxx/copycode.js#L2 lang:js %}

你也可以嵌套其他组件比如 grid floding…

Tips

by the way，我在 coding 中标签中增加了 lazyload ，如果你的主题 plugins.lazyload.enable 是 true 的话，那么 lazyload 是默认开启的。