【工欲善其事】巧用 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。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Elasticsearch使用Easy-Es + RestHighLevelClient实现深度分页跳页

注意&#xff01;&#xff01;&#xff01;博主只在测试环境试了一下&#xff0c;没有发到生产环境跑。因为代码还没写完客户说不用弄了( •̩̩̩̩&#xff3f;•̩̩̩̩ ) 也好&#xff0c;少个功能少点BUG 使用from size的时候发现存在max_result_window10000的限制&…

如何使用工具删除 iPhone 上的图片背景

在 iPhone 上删除背景图像变得简单易行。感谢最近 iOS 更新中引入的新功能。如今&#xff0c;iOS 用户现在可以毫不费力地删除背景&#xff0c;而无需复杂的应用程序。在这篇文章中&#xff0c;您将学习如何使用各种方法去除 iPhone 上的背景。这可确保您可以选择最适合您偏好的…

自动驾驶核心技术:感知融合、规划决策、控制执行

1、前言 简单来说&#xff0c;实现自动驾驶需要解决三个核心问题&#xff1a;“我在哪?我要去哪?我该如何去?”能完整解决这三个问题就是真正的自动驾驶。 目前&#xff0c;自动驾驶汽车关键技术主要包括环境感知、精准定位、决策与规划、控制与执行、高精地图与车联网V2X以…

Linux下的IO模型

阻塞与非阻塞IO&#xff08;Input/Output&#xff09; 阻塞与非阻塞IO&#xff08;Input/Output&#xff09;是计算机操作系统中两种不同的文件或网络通信方式。它们的主要区别在于程序在等待IO操作完成时的行为。 阻塞IO&#xff08;Blocking IO&#xff09; 在阻塞IO模式下…

无IDEA不Java:快速掌握Java集成开发环境

IntelliJ IDEA是一种强大的Java集成开发环境&#xff0c;是Java开发人员的首选工具之一。本文将介绍IDEA的基本使用方法和常用功能&#xff0c;以帮助初学者快速上手。 安装和配置 首先&#xff0c;需要下载并安装IntelliJ IDEA。在安装完成后&#xff0c;需要配置JDK&#xff…

pygame--超级马里奥(万字详细版)

超级马里奥点我下载https://github.com/marblexu/PythonSuperMario 1.游戏介绍 小时候的经典游戏&#xff0c;代码参考了github上的项目Mario-Level-1&#xff0c;使用pygame来实现&#xff0c;从中学习到了横版过关游戏实现中的一些处理方法。原项目实现了超级玛丽的第一个小…

稀缺森林火险等级预测算法,基于xgboost方法的火险等级预测,共划分5级,依据当前地区月份,降水量,风力等参数进行预测,并提供15000字的报告

森林火险等级预测算法&#xff0c;基于xgboost方法的火险等级预测&#xff0c;共划分5级&#xff0c;依据当前地区月份&#xff0c;降水量&#xff0c;风力等参数进行预测&#xff0c;并提供15000字的报告 森林火险等级预测算法介绍 项目名称 基于XGBoost的森林火险等级预测算…

无环SLAM系统集成后端回环检测模块(loop):SC-A-LOAM以及FAST_LIO_SLAM

最近在研究SLAM目标检测相关知识&#xff0c;看到一篇论文&#xff0c;集成了SC-A-LOAM作为后端回环检测模块&#xff0c;在学习了论文相关内容后决定看一下代码知识&#xff0c;随后将其移植&#xff0c;学习过程中发现我找的论文已经集成了回环检测模块&#xff0c;但是我的另…

mybatis-plus使用总结

基本使用 mybatis-plus依赖 <!-- mybatis-plus开始 --><dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-boot-starter</artifactId><version>3.5.7</version></dependency><dependency>&l…

【Linux探索学习】第二弹——Linux的基础指令(中)——夯实基础第二篇

Linux基础指令&#xff08;上&#xff09;&#xff1a;【Linux探索学习】第一弹——Linux的基本指令&#xff08;上&#xff09;——开启Linux学习第一篇-CSDN博客 前言&#xff1a; 在前面我们已经讲解了一些常用的Linux的基础指令&#xff0c;那些当然是远远不够的&#xff…

自定义 shell文件系统

&#x1f3f7;️ 材料准备 创建一个文件:myshell.c: #include <stdio.h>int main() {return 0; }创建一个 Makefile 文件&#xff0c;文件内容如下&#xff1a; 1 mybash:myshell.c2 g -o $ $^ -stdc11 3 .PHONY:…

仿RabbitMQ实现消息队列服务端(二)

文章目录 ⽹络通信协议设计信道管理模块连接管理模块服务器模块实现 ⽹络通信协议设计 其中⽣产者和消费者都是客⼾端&#xff0c;它们都需要通过⽹络和BrokerServer进⾏通信。具体通信的过程我们使⽤Muduo库来实现&#xff0c;使⽤TCP作为通信的底层协议&#xff0c;同时在这个…

【智能大数据分析 | 实验二】Spark实验:部署Spark集群

【作者主页】Francek Chen 【专栏介绍】 ⌈ ⌈ ⌈智能大数据分析 ⌋ ⌋ ⌋ 智能大数据分析是指利用先进的技术和算法对大规模数据进行深入分析和挖掘&#xff0c;以提取有价值的信息和洞察。它结合了大数据技术、人工智能&#xff08;AI&#xff09;、机器学习&#xff08;ML&a…

如何编写一个优雅的commit message

在Git中&#xff0c;git commit 命令扮演着至关重要的角色。它的主要作用是将暂存区&#xff08;staging area&#xff09;里的改动内容提交到本地仓库&#xff08;repository&#xff09;中&#xff0c;形成一个新的版本或提交&#xff08;commit&#xff09;。这个过程是 Git…

【HarmonyOS】时间处理Dayjs

背景 在项目中经常会使用要时间的格式转换&#xff0c;比如数据库返回一个Date数据&#xff0c;你需要转成2024-10-2的格式&#xff0c;鸿蒙的原生SDK中是没有办法实现的&#xff0c;因此&#xff0c;在这里介绍第三方封装好并且成熟使用的库Dayjs。 安装 切换到Entry文件夹下…

【学习资源】人在环路的机器学习

说明&#xff1a;本文图片和内容来源 Human-in-the-Loop Machine Learning Human-in-the-Loop Machine Learning Active learning and annotation for human-centered AI by Robert (Munro) Monarch, June 2021 介绍Human-in-the-Loop的目标&#xff0c;学习过程&#xff0c…

gdb 调试 linux 应用程序的技巧介绍

使用 gdb 来调试 Linux 应用程序时&#xff0c;可以显著提高开发和调试的效率。gdb&#xff08;GNU 调试器&#xff09;是一款功能强大的调试工具&#xff0c;适用于调试各类 C、C 程序。它允许我们在运行程序时检查其状态&#xff0c;设置断点&#xff0c;跟踪变量值的变化&am…

基于Arduino的宠物食物分配器

创作本文的初衷是本人的一个养宠物的梦想&#xff08;因为家里人对宠物过敏&#xff0c;因此养宠物的action一直没有落实&#xff09;&#xff0c;但是梦想总是要有的哈哈哈哈哈。上周正好是和一个很好的朋友见面&#xff0c;聊到了养宠物的事情&#xff0c;她大概是讲到了喂宠…

震撼!工业史上第一家万级别规模的工业数字化设备效果图平台

耗时八年打造&#xff0c;国内第一家万级别规模的工业数字化设备效果图平台 平台&#xff1a;www.kingview3d.cn 创作者&#xff1a;kingview3d郭工 行业&#xff1a;煤矿综合自动化、污水处理、净水处理、楼宇暖通、环保工程、医药废水处理、二供、无负压加压站、提升泵站、一…

《NoSQL》非关系型数据库MongoDB 学习笔记!

Mongo基础&#xff1a; 使用数据库&#xff1a; 使用use 命令 后面跟着要使用的数据库名字即可&#xff0c; 例如&#xff1a;use cities, 值得注意的是&#xff0c; mongo中不像mysql&#xff0c; 还需要先创建数据库&#xff0c;后访问&#xff0c; mongo中&#xff0c;你无…