Ultra Math Preview : VSCode上的LaTeX公式实时预览插件
一直觉着 VS Code 的 TeX 公式(包括 markdown 和 LaTeX)只能在定界符上hover预览,或者开一个预览面板看,没有那种像 Typora 一样紧跟在公式后面的预览面板,多少有些不方便.
于是写了一个能够紧跟着公式显示预览的扩展:(点击图片跳转)

效果如下:

输入时可以实时更新:

简单总结实现就是:
- 首先使用插件 HyperScopes 提供的 API 拿到 当前文本的
scope,判断是否为数学环境 - 然后上下搜索定界符(
$,\\[\\]等)位置,拿到数学文本 - 使用 MathJax 转成SVG
- 使用内置 API
window.createTextEditorDecorationType设置文字修饰 CSS ,将 SVG 作为::before伪元素的content添加
没用 hover 是觉着光标一动预览就没了,没用面板预览是觉着单独的窗口太笨重且很占地方(不能自己改变大小)。事实上,上述两个方法 LaTeX Workshop 都实现了。这才有了使用 TextDecoration 的想法。
算是第一次练手的插件了。中间踩了很多坑,有空总结一下。
再放一次链接。欢迎下载、测试,打好评~

也欢迎来 Github 提 Issue 。给个 Star吧~~~
原文链接:https://www.cnblogs.com/yf-zhao/p/15915300.html
Ultra Math Preview : VSCode上的LaTeX公式实时预览插件的更多相关文章
- jq实现上传头像并实时预览功能
效果 页面结构 <form action="" name="form0" id="form0"> <input type= ...
- javascript上传多张图片并预览
直接上代码 html代码 <div> <label>封面</label> <input type="file" id="cove ...
- LaTeX实时预览中文
参考资料:http://blog.sina.com.cn/s/blog_6ea58f530101aizw.html 功夫不负有心人,终于在经过艰苦卓绝的寻找之后,让我的Texpad实现了实时预览.此时 ...
- 【微信小程序云开发】1分钟学会实现上传、下载、预览、删除图片,并且以九宫格展示图片
大家好,我叫小秃僧 这篇文章是讲解云开发如何上传.下载.预览.删除图片,并且以九宫格展示图片的功能 @ 目录 1. 实现效果 2.JavaScript代码 3.wxml代码 4.wxss代码 1. 实 ...
- dropzonejs中文翻译手册 DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库.
http://wxb.github.io/dropzonejs.com.zh-CN/dropzonezh-CN/ 由于项目需要,完成一个web的图片拖拽上传,也就顺便学习和了解了一下前端的比较新的技术 ...
- Sublime、Webstorm等在APICloud平台上全面支持WiFi真机同步和实时预览功能
APICloud工具插件包括APICloud Studio.Sublime Text和Webstorm全面为开发者提供iOS和Android平台真机同步调试功能,不仅可以通过USB方式进行APP真机同 ...
- TypeWonder – 在任何网站上实时预览字体效果
TypeWonder 让网页字体的选择过程变得轻松愉快.它可以帮助您在任何网站上快速测试 Web 字体效果!输入网站网址,就能够即时预览的字体的实际效果,还可以从数百种字体中进行挑选,您还可以得到所需 ...
- uploadPreview 兼容多浏览器图片上传及预览插件使用
uploadPreview兼容多浏览器图片上传及预览插件 http://www.jq22.com/jquery-info2757 Html 代码 <div class="form-gr ...
- js图片预览插件,不涉及上传
小小的几十行代码,很牛逼,很实用. 支持多个图片的预览,只要new多个对象就行了. html如下 <!-- zhouxiang www.zhou-xiang.com --> <!DO ...
随机推荐
- Go语言系列之性能调优
在计算机性能调试领域里,profiling 是指对应用程序的画像,画像就是应用程序使用 CPU 和内存的情况. Go语言是一个对性能特别看重的语言,因此语言中自带了 profiling 的库,这篇文章 ...
- Leetcode算法系列(链表)之删除链表倒数第N个节点
Leetcode算法系列(链表)之删除链表倒数第N个节点 难度:中等给定一个链表,删除链表的倒数第 n 个节点,并且返回链表的头结点.示例:给定一个链表: 1->2->3->4-&g ...
- SYCOJ1793
题目-统计单词前缀数 (shiyancang.cn) 1 #include<bits/stdc++.h> 2 using namespace std; 3 map<string,in ...
- fis学习
http://fis.baidu.com/docs/beginning/getting-started.html#md5 还是喜欢时间戳?没问题,FIS也可以满足你的需求,点击这里
- Javascript中字符串常用方法
JavaScript字符串常用方法 (1)获取相应位置的字符(charAt()) var str="你好,小小鸟!" var s=str.charAt(1) //获取到索引为1的字 ...
- golang gin框架中实现一个简单的不是特别精确的秒级限流器
起因 看了两篇关于golang中限流器的帖子: Gin 开发实践:如何实现限流中间件 常用限流策略--漏桶与令牌桶介绍 我照着用,居然没效果-- 时间有限没有深究.这实在是一个很简单的功能,我的需求是 ...
- @WebServlet注解(Servlet注解)
@WebServlet 注解的属性 @WebServlet 用于将一个类声明为 Servlet,该注解会在部署时被容器处理,容器根据其具体的属性配置将相应的类部署为 Servlet.该注解具有下表给出 ...
- golang中的原子操作atomic包
1. 概念 原子操作 atomic 包 加锁操作涉及到内核态的上下文切换,比较耗时,代价高, 针对基本数据类型我们还可以使用原子操作来保证并发的安全, 因为原子操作是go语言提供的方法,我们在用户态就 ...
- golang中map原理剖析
1. golang中的map有自己的一套实现原理,其核心是由hmap和bmap两个结构体实现的 2. 初始化map package main func main() { // 初始化一个可容纳10个 ...
- golang中文件和路径用法
package main import ( "fmt" "io/fs" "io/ioutil" "os" "p ...