【工欲善其事】巧用 Sublime Text 生成带格式的 HTML 片段

文章目录

  • 【工欲善其事】巧用 Sublime Text 生成带格式的 HTML 片段
    • 1 问题由来
    • 2 操作流程
      • 步骤1:打开代码片段定制页
      • 步骤2:在新标签页输入定制 XML
      • 步骤3:保存定义内容
      • 步骤4:功能测试
    • 3 拓展

【工欲善其事】巧用 Sublime Text 生成带格式的 HTML 片段


1 问题由来

Markdown 文档编辑神器 Typora

【图 1 Markdown 文档编辑神器 Typora】

用惯了 Typora 这类专门写 Markdown 文章的软件后,偶尔遇到一些不方便处理的 HTML 标记就显得很不流畅。比如给某个按键添加 <kbd></kbd> 标签,Typora 里就没有对应的快捷键。通常我都是用行内的代码块来替代(快捷键:Ctrl + Shift + `),比如按下 Ctrl 键,就表示成 Ctrl,而不是通过手动添加 <kbd> 标签变成 Ctrl

但最近刚好就碰到需要大量输入这样的按键格式的场景。因为我想把 Vim 的操作技巧再整理整理,以前落下的笔记顺便完善完善。结果里面就有大量按键组合需要输入。如果都做成代码块的格式倒也不是不行,可转念一想,自己天天写博客都在提醒大家注意文档的语义化,写的时候虽然麻烦些,但后面这类高质量内容就可以很方便地用于其他场合,比如屏幕阅读工具、NLP 语料库的数据训练等等,所以还是写成 <kbd> 标签更合适。

那么,有没有什么方法可以加速这个格式化过程呢?

我想到了 Sublime Text 提供的自定义代码片段(Snippets)功能。

2 操作流程

根据 Sublime Text 的官方文档,定制代码片段成功后,只需要在某个语法环境里(比如默认的纯文本环境,即 plain text)输入一串快捷字符(如小写英文字母 k),然后按下 Tab 键,编辑器就能快速生成 <kbd></kbd>,并且光标还能自动定位到标签之间。这样,只需输入我想要文本内容,再全选、剪切、粘贴——就大功告成了!

具体步骤如下:

步骤1:打开代码片段定制页

位置:Tools | Developer | New Snippet...

步骤 1 截图

【图 2 打开代码片段定制页】

步骤2:在新标签页输入定制 XML

内容如下:

<snippet><content><![CDATA[<kbd>${1:Your Key}</kbd>]]></content><!-- Optional: Set a tabTrigger to define how to trigger the snippet --><tabTrigger>k</tabTrigger><!-- Optional: Set a scope to limit where the snippet will trigger --><scope>text.plain</scope><description>自动生成按键元素 &lt;kbd>&lt;/kbd>,并让光标定位到开闭标签之间</description>
</snippet>

除了默认打开时的纯文本环境(text.plain),常见的语法环境对应的 <scope> 节点的取值如下:

语法环境scope 取值
JavaScriptsource.js
HTMLsource.html
CSSsource.css
Javasource.java
Csource.c
C++source.cpp
PHPsource.php
Rubysource.ruby
Gosource.go
Shell 脚本source.shell
基础 HTMLtext.html.basic
JSONsource.json
XMLtext.xml

步骤3:保存定义内容

步骤2 中定义的内容会以文件形式默认保存到 Sublime Text 数据目录下的 User 包(Package)里面,格式为:<CUSTOM_SNIPPET_NAME>.sublime-snippet,比如我这个片段,就命名为:keyboard_tag_pair.sublime-snippet

图 3 保存定义内容

【图 3 保存定义内容】

如果没有自动定位到这里也无妨,用这段 PowerShell 脚本查看即可:

echo $env:APPDATA

再不行,就用最原始的方式:在 Sublime Text 图标上右键,选择打开文件所在的位置:

图 4 从应用图标反向查找 Sublime Text 安装路径

【图 4 从应用图标反向查找 Sublime Text 安装路径】

再次强调,新增的这个片段文件,它的扩展名一定得是 *.sublime-snippet 形式,否则编辑器无法正确识别!!!

一定得是 *.sublime-snippet 形式!!!
一定得是 *.sublime-snippet 形式!!!
一定得是 *.sublime-snippet 形式!!!

重要的事情说三遍。

步骤4:功能测试

由于该片段在纯文本环境生效(定义作用域时写的 <scope>text.plain</scope>),因此只需打开一个空白标签,输入小写英文字母 k,然后按下 Tab 键,应该就会看到下面的效果:

自动生成的 HTML 代码片段测试效果

【图 5 自动生成的 HTML 代码片段测试效果】

然后输入 Ctrl,就变成了:

图 6 直接输入中间的文字内容

【图 6 直接输入中间的文字内容】

这时再全选、剪切(或复制),就可以粘贴到 Typora 生成按键效果的字符内容了!

3 拓展

既然可以自定义 <kbd></kbd> 这样的 HTML 标记内容,发表博文时自定义的一些 HTML 片段也可以用它来生成。

如果需要多个占位符(如上面的 Your Key 提示信息),可以使用 ${2:placeholder2}${3:placeholder3} 这样的格式指定占位符出现的具体位置;调用时通过 Tab 键能可以实现按指定的序号依次选中每个需要手动输入的地方。最后再全选复制出来,就都搞定了。

要是定义片段的时间过于久远,或者不知道当前这台电脑定义了那些可用的片段,可以通过这行 PowerShell 脚本查看:

ls $env:APPDATA/"Sublime Text"/packages/User/*.sublime-snippet

这里的 $env:APPDATA/"Sublime Text" 就是当前电脑 Sublime Text 的安装路径。

最后的最后,再介绍一个快速浏览自定义代码片段的操作:使用快捷键 Ctrl + Shift + P 弹出命令条,输入 snippet: 就能看到已经定义好的代码片段:

图 7 通过快捷命令栏快速浏览可用的自定义代码片段

【图 7 通过快捷命令栏快速浏览可用的自定义代码片段】

更多配置详情,可以参考 Sublime Text 的官方文档:https://www.sublimetext.com/docs/completions.html#snippets。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/55484.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【笔记】信度检验

一、信度 信度是指测量结果的一致性和稳定性。 1.一致性&#xff08;Consistency&#xff09; 一致性指的是测量工具内部各个部分或项目之间的协调一致程度。高一致性意味着测量工具的不同部分都在测量同一个概念或特质。 例子&#xff1a;智力测试 假设我们有一个包含100…

c语言函数变长参数原理分析

在 C 语言中&#xff0c;函数可以接受可变数量的参数&#xff0c;这种函数称为“变长参数函数”。变长参数的实现主要依靠标准库 <stdarg.h> 中定义的宏。以下是变长参数的原理、使用方法以及在底层的实现机制的详细解释。 1. 变长参数函数的声明 变长参数函数的基本形…

快速扩展随机数算法

目录 博客大纲详细内容1. 引言2. 快速扩展随机树&#xff08;RRT&#xff09;算法概述3. RRT 算法的实现4. 示例&#xff1a;使用 RRT 算法进行无人机路径规划5. 算法的优缺点6. 改进方向7. 应用场景8. 结论 博客大纲 引言 无人机路径规划的重要性RRT 算法的应用背景 快速扩展…

express,MySQL 实现登录接口,如果用户未注册直接注册

要实现一个登录接口&#xff0c;并在用户未注册时直接注册他们&#xff0c;您需要在您的 Express 应用中处理两个逻辑路径&#xff1a;一个是验证用户是否已存在&#xff08;登录&#xff09;&#xff0c;另一个是在用户不存在时创建新用户&#xff08;注册&#xff09;。以下是…

ai智能论文生成系统有用吗?分享5款ai文献综述自动生成器

近年来&#xff0c;人工智能&#xff08;AI&#xff09;技术在学术写作领域的应用越来越广泛&#xff0c;尤其是在文献综述的自动生成方面。AI智能论文生成系统通过深度学习和自然语言处理技术&#xff0c;能够帮助研究人员快速生成高质量的文献综述&#xff0c;从而提高写作效…

物理学基础精解【56】

文章目录 物理学中的数论一次同余式及解法定义数学原理公式与计算例子例题 中国剩余定理&#xff08;Chinese Remainder Theorem&#xff09;定义数学原理公式计算步骤例子例题 中国剩余定理一、定义二、数学原理三、公式四、计算五、例子六、例题 参考文献 物理学中的数论 一…

YOLO v1详解解读

&#x1f680; 在此之前主要介绍了YOLO v5源码的安装和使用&#xff08;YOLO v5安装教程&#xff09;&#xff0c;接下来将探索YOLO的实现原理&#xff0c;作为一个金典的单阶段目标检测算法&#xff0c;应该深度的理解它的构建思想&#xff1b;所以本系列文章将从LOVO v1出发到…

在 Ubuntu 18.04 上安装 Syncthing

在 Ubuntu 18.04 上安装 Syncthing 是一个简单的过程。Syncthing 提供官方的 apt 仓库&#xff0c;使用该仓库可以方便地安装和更新 Syncthing。 https://syncthing.net/downloads/ 文章目录 安装步骤 1: 添加 Syncthing 官方仓库步骤 2: 安装 Syncthing步骤 3: 启动并运行 S…

力扣 简单 110.平衡二叉树

文章目录 题目介绍解法 题目介绍 解法 平衡二叉树:任意节点的左子树和右子树的高度之差的绝对值不超过 1 //利用递归方法自顶向下判断以每个节点为根节点的左右子树的最大深度是否大于1 class Solution {public boolean isBalanced(TreeNode root) {if(root null){return tr…

SpringBoot在线教育系统:从零到一的构建过程

1系统概述 1.1 研究背景 随着计算机技术的发展以及计算机网络的逐渐普及&#xff0c;互联网成为人们查找信息的重要场所&#xff0c;二十一世纪是信息的时代&#xff0c;所以信息的管理显得特别重要。因此&#xff0c;使用计算机来管理微服务在线教育系统的相关信息成为必然。开…

P1376 [USACO05MAR] Yogurt factory 机器工厂

真的不要怕做贪心的题目&#xff0c;原理都很简单。 题目描述 小 T 开办了一家机器工厂&#xff0c;在 N个星期内&#xff0c;原材料成本和劳动力价格不断起伏&#xff0c;第 i 周生产一台机器需要花费 Ci​ 元。若没把机器卖出去&#xff0c;每保养一台机器&#xff0c;每周…

html5 + css3(下)

目录 CSS基础基础认识体验cssCSS引入方式 基础选择器选择器-标签选择器-类选择器-id选择器-通配符 字体和文本样式1.1 字体大小1.2 字体粗细1.3 字体样式&#xff08;是否倾斜&#xff09;1.4 常见字体系列&#xff08;了解&#xff09;1.5 字体系列拓展-层叠性font复合属性文本…

上传本地项目到GitHub远程仓库(极简洁操作版)

第一步&#xff1a;在GitHub创建一个空的仓库 第二步&#xff1a;将仓库克隆&#xff08;下载&#xff09;到本地 第三步&#xff1a;将你要上传的所有文件放到这个克隆的仓库文件夹中 第四步&#xff1a;通过git add .将待上传文件添加到暂存区 此时&#xff0c;可以通过git …

网络基础 【HTTPS】

&#x1f493;博主CSDN主页:麻辣韭菜&#x1f493;   ⏩专栏分类&#xff1a;Linux初窥门径⏪   &#x1f69a;代码仓库:Linux代码练习&#x1f69a; &#x1f4bb;操作环境&#xff1a; CentOS 7.6 华为云远程服务器 &#x1f339;关注我&#x1faf5;带你学习更多Linux知识…

科普篇--- 什么是硬件在环测试?

我是穿拖鞋的汉子&#xff0c;魔都中坚持长期主义的汽车电子工程师。 老规矩&#xff0c;分享一段喜欢的文字&#xff0c;避免自己成为高知识低文化的工程师&#xff1a; 屏蔽力是信息过载时代一个人的特殊竞争力&#xff0c;任何消耗你的人和事&#xff0c;多看一眼都是你的不…

【60天备战2024年11月软考高级系统架构设计师——第38天:性能优化与高可用设计】

在设计现代云应用时&#xff0c;性能和高可用性是两个至关重要的目标。通过合理的设计和策略&#xff0c;可以确保系统在负载高峰期间仍能保持稳定和快速响应。 性能优化的关键策略 缓存机制&#xff1a;使用缓存技术&#xff08;如Redis、Memcached&#xff09;存储频繁访问…

第二十三章-容器控件QTabWidget

QTabWidget 是 PyQt5 中的一个容器小部件,它可以在一个窗口中创建多个选项卡,每个选项卡包含一个独立的页面。当用户单击不同的选项卡时,可以在相同的区域内显示不同的内容。QTabWidget 通常用于创建选项卡式界面,如浏览器、多设置选项的配置窗口等。 初步示例 下面是一个…

千万不要运行!几个可以整蛊你朋友的Python程序!

Python 能做很多无聊&#xff0c;但有意思的事情&#xff0c;例如接下来的一些案例。以下程序&#xff0c;不要发代码&#xff0c;要不实现不了你整蛊的目的。 要打包成一个 exe 程序&#xff0c;发给朋友才有意思&#xff0c;使用 pip install pyinstaller。 打包命令如下&a…

深度强化学习中收敛图的横坐标是steps还是episode?

在深度强化学习&#xff08;Deep Reinforcement Learning, DRL&#xff09;的收敛图中&#xff0c;横坐标选择 steps 或者 episodes 主要取决于算法的设计和实验的需求&#xff0c;两者的差异和使用场景如下&#xff1a; Steps&#xff08;步数&#xff09;&#xff1a; 定义&a…

使用pytorch进行迁移学习的两个步骤

1. 步骤及代码 迁移学习一般都会使用两个步骤进行训练&#xff1a; 固定预训练模型的特征提取部分&#xff0c;只对最后一层进行训练&#xff0c;使其快速收敛&#xff1b;使用较小的学习率&#xff0c;对全部模型进行训练&#xff0c;并对每层的权重进行细微的调节。 impor…