一直觉着 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公式实时预览插件的更多相关文章

  1. jq实现上传头像并实时预览功能

    效果 页面结构 <form action="" name="form0" id="form0"> <input type= ...

  2. javascript上传多张图片并预览

    直接上代码 html代码 <div> <label>封面</label> <input type="file" id="cove ...

  3. LaTeX实时预览中文

    参考资料:http://blog.sina.com.cn/s/blog_6ea58f530101aizw.html 功夫不负有心人,终于在经过艰苦卓绝的寻找之后,让我的Texpad实现了实时预览.此时 ...

  4. 【微信小程序云开发】1分钟学会实现上传、下载、预览、删除图片,并且以九宫格展示图片

    大家好,我叫小秃僧 这篇文章是讲解云开发如何上传.下载.预览.删除图片,并且以九宫格展示图片的功能 @ 目录 1. 实现效果 2.JavaScript代码 3.wxml代码 4.wxss代码 1. 实 ...

  5. dropzonejs中文翻译手册 DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库.

    http://wxb.github.io/dropzonejs.com.zh-CN/dropzonezh-CN/ 由于项目需要,完成一个web的图片拖拽上传,也就顺便学习和了解了一下前端的比较新的技术 ...

  6. Sublime、Webstorm等在APICloud平台上全面支持WiFi真机同步和实时预览功能

    APICloud工具插件包括APICloud Studio.Sublime Text和Webstorm全面为开发者提供iOS和Android平台真机同步调试功能,不仅可以通过USB方式进行APP真机同 ...

  7. TypeWonder – 在任何网站上实时预览字体效果

    TypeWonder 让网页字体的选择过程变得轻松愉快.它可以帮助您在任何网站上快速测试 Web 字体效果!输入网站网址,就能够即时预览的字体的实际效果,还可以从数百种字体中进行挑选,您还可以得到所需 ...

  8. uploadPreview 兼容多浏览器图片上传及预览插件使用

    uploadPreview兼容多浏览器图片上传及预览插件 http://www.jq22.com/jquery-info2757 Html 代码 <div class="form-gr ...

  9. js图片预览插件,不涉及上传

    小小的几十行代码,很牛逼,很实用. 支持多个图片的预览,只要new多个对象就行了. html如下 <!-- zhouxiang www.zhou-xiang.com --> <!DO ...

随机推荐

  1. 在 python 项目中如何记录日志

    一. 概述 写本文的目的是我在写 python 项目的时候需要记录日志,我忘记怎么处理了,每次都需要去网上查一遍,好记性不如烂笔头, 这里把查阅的内容记录下来,方便以后查找. python 项目中记录 ...

  2. Java反射详解:入门+使用+原理+应用场景

    反射非常强大和有用,现在市面上绝大部分框架(spring.mybatis.rocketmq等等)中都有反射的影子,反射机制在框架设计中占有举足轻重的作用. 所以,在你Java进阶的道路上,你需要掌握好 ...

  3. 《剑指offer》面试题27. 二叉树的镜像

    问题描述 请完成一个函数,输入一个二叉树,该函数输出它的镜像. 例如输入:      4    /   \   2     7  / \   / \ 1   3 6   9 镜像输出:      4 ...

  4. 【记录一个问题】golang神坑,明明返回了接口指针类型的nil值,却无法用if判断

    先看看导致异常的代码: package main import ( "fmt" "log" ) type MyError1 struct{ MyErrorCod ...

  5. StringBuilder类练习

    1 package cn.itcast.p2.stringbuffer.demo; 2 3 public class StringBuilderTest { 4 public static void ...

  6. 从服务端生成Excel电子表格(Node.js+SpreadJS)

    Node.js是一个基于Chrome V8引擎的JavaScript运行环境,通常用于创建网络应用程序.它可以同时处理多个连接,并且不像其他大多数模型那样依赖线程. 对于 Web 开发者来说,从数据库 ...

  7. WEB前端基础之SCC(字体颜色背景-盒子模型)

    目录 一:伪元素选择器 1.首字调整>>>:也是一种文档布局的方式 2.在文本的前面通过css动态渲染文本>>>:特殊文本无法选中 3.在文本的后面通过css动态渲 ...

  8. 使用Hot Chocolate和.NET 6构建GraphQL应用(3) —— 实现Query基础功能

    系列导航 使用Hot Chocolate和.NET 6构建GraphQL应用文章索引 需求 在本文中,我们通过一个简单的例子来看一下如何实现一个最简单的GraphQL的接口. 实现 引入Hot Cho ...

  9. Nginx怎么处理请求的?

    nginx接收一个请求后,首先由listen和server_name指令匹配server模块,再匹配server模块里的 location,location就是实际地址.   server { # 第 ...

  10. Java语法专题2: 类变量的初始化顺序

    合集目录 Java语法专题2: 类变量的初始化顺序 问题 这也是Java面试中出镜率很高的基础概念问题 描述一下多级继承中字段初始化顺序 描述一下多级继承中类变量初始化顺序 写出运行以下代码时的控制台 ...