Site Overlay

VSCode 上 Mathjax 与 Markdown 环境的配置

2020年6月2日 更新:

Markdown Preview Enhanced 这个插件 BUG 太多,所以我建议改用 Instant Markdown。

定位文件:"C:\Users\pluveto\.vscode\extensions\dbankier.vscode-instant-markdown-1.4.4\index.html"

如下增加:

<script src="//cdn.bootcss.com/mathjax/2.7.0/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script type="text/x-mathjax-config"> 
        MathJax.Hub.Config({
            showProcessingMessages: false,
            messageStyle: "none",
            extensions: ["tex2jax.js","TeX/mediawiki-texvc.js","TeX/noUndefined.js", "TeX/autoload-all.js", "TeX/AMSmath.js", "TeX/AMSsymbols.js"],
            jax: ["input/TeX", "output/output/HTML-CSS"],
            tex2jax: {
                inlineMath: [ ['$','$'], ["\(","\)"] ],
                displayMath: [ ['$$','$$'], ["\[","\]"] ],
                skipTags: ['script', 'noscript', 'style', 'textarea', 'code'],
                ignoreClass:"comment-content"
            },
            "HTML-CSS": {
                availableFonts: ["STIX","TeX"],
                showMathMenu: false
            }
        });
        MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
</script>

本以为装个插件就完事了,没想到这都有坑,只好写这一篇水文记录一下。

首先安装插件:

  • Markdown Preview Enhanced
    • 用于 Markdown预览
  • Math Snippets
    • 用于快速输入表达式
  • tencent-cloud-cos-upload-image
    • 用来上传图片到腾讯云

然后你会发现 Markdown 不支持 Snippets,也就是没有任何代码提示。解决方法:

F1,打开用户设置(Open User Settings),找到一个编辑 settings.json 的入口,向配置文件追加:

    "[markdown]": {
        "editor.quickSuggestions": true
    },

追加在第一级花括号下面:

image-20200520183811353

之后要把数学渲染引擎改为 Mathjax。还是在用户设置,不废话了。

以及:

"editor.suggest.snippetsPreventQuickSuggestions": true

然而这样之后,Mathjax 并不会渲染。查看 html 可以发现控制台报错。我自己摸索出了解决方法:

编辑 C:\Users\USERNAME\.mume\mathjax_config.js 改为

module.exports = {
    showProcessingMessages: false,
    messageStyle: "none",
    extensions: ["tex2jax.js", "TeX/mediawiki-texvc.js", "TeX/noUndefined.js", "TeX/autoload-all.js", "TeX/AMSmath.js", "TeX/AMSsymbols.js"],
    jax: ["input/TeX", ".../../output/HTML-CSS"],
    tex2jax: {
        inlineMath: [['$', '$'], ["\(", "\)"]],
        displayMath: [['$$', '$$'], ["\[", "\]"]],
        skipTags: ['script', 'noscript', 'style', 'textarea', 'code'],
        ignoreClass: "comment-content"
    },
    "HTML-CSS": {
        availableFonts: ["STIX", "TeX"],
        showMathMenu: false
    }
}

我提交了 issue,不知道能不能解决。

COS 配置,下面供参考:

{
    // 地区,在COS对象存储中bucket对应的地域
    "tencentCOSUpload.region": "",    
    // secretId,在 https://console.cloud.tencent.com/cam/capi 中获取
    "tencentCOSUpload.secretId": "",
    // secretKey,在 https://console.cloud.tencent.com/cam/capi 中获取
    "tencentCOSUpload.secretKey": "",
    // 输入你的bucket名称,如 a-1250000000
    "tencentCOSUpload.bucket": "",
    // remotePath,您的存储目录,例如要把文件存在 http://${你的域名}/images/png 这个目录下,则这里填写images/png。默认为空,即存储在根路径下
    "tencentCOSUpload.remotePath": "",
    // 存储桶是否为公有可访问,如为私有,且希望上传后的url带签名,则设置为false,默认是 true
    "tencentCOSUpload.isPublic": "true",
    // 签名有效期,单位为妙,isPublic设置为 false 时有效
    "tencentCOSUpload.duration": "31536000",
    // 自定义域名,原来替换引用的默认COS域名,无特殊需求可不用修改
    "tencentCOSUpload.domain": "",
    // 临时目录,默认 /tmp/.tencentCOSUpload,无特殊需求可不用修改
    "tencentCOSUpload.localPath": "/tmp/.tencentCOSUpload"
}

功能速查

图片上传

  • 使用 ctrl+ alt + p (Windows) / cmd + opt + p (Mac), 粘贴板里面的图片会直接上传至cos
  • 使用 ctrl+ alt + o (Windows) / cmd + opt + o (Mac), 选择本地文件上传至cos

Latex Snips

快捷输入 展开形式
ii $$1$ $0
dd $$ $1 $$$0
id $\\displaystyle $1$ $0
II \\($1\\) $0
DD \\[$1\\]$0
left \\left
right \\right
langle \\langle
rangle \\rangle
lfloor \\lfloor
rfloor \\rfloor
lceil \\lceil
rceil \\rceil
ulcorner \\ulcorner
urcorner \\urcorner
llcorner \\llcorner
lrcorner \\lrcorner
abs \\left| $1 \\right| $0
norm \\left\\| $1 \\right\\| $0
lrparentheses \\left( $1 \\right) $0
lrbrackets \\left[ $1 \\right] $0
lrcurlybrackets \\left\\{ $1 \\right\\\\} $0
lrangle \\left\\langle $1 \\right\\rangle $0
lrfloor \\left\\lfloor $1 \\right\\rfloor $0
lrceil \\left\\lceil $1 \\right\\rceil $0
oo \\infty
degr ^{\\circ}
bf \\mathbf{$1}$0
bb \\mathbb{$1}$0
bbR \\mathbb{R}
bbZ \\mathbb{Z}
bbQ \\mathbb{Q}
bbN \\mathbb{N}
bbC \\mathbb{C}
equivalent \\Leftrightarrow
implies \\Rightarrow
deriv \\frac{d${1:f}}{d${2:x}} $0
pderiv \\frac{\\partial ${1:f}}{\\partial ${2:x}} $0
cases \\begin{cases}","\t$1 &\\text{$2}\\\\\\\\","\t$3 &\\text{$4}\\\\\\\\$5","\\end{cases} $0
align \\begin{${1|align,align*,aligned|}}","\t$2\\\\\\\\","\t$3\\\\\\\\$4","\\end{$1} $0
frac \\frac{$1}{$2}$0
sqrt \\sqrt[$1]{$2}$0
alpha \\alpha
beta \\beta
gamma \\gamma
Gamma \\Gamma
vargamma \\vargamma
delta \\delta
Delta \\Delta
epsilon \\epsilon
varepsilon \\varepsilon
zeta \\zeta
eta \\eta
theta \\theta
Theta \\Theta
vartheta \\vartheta
iota \\iota
kappa \\kappa
lambda \\lambda
Lambda \\Lambda
mu \\mu
nu \\nu
xi \\xi
Xi \\Xi
pi \\pi
Pi \\Pi
varpi \\varpi
rho \\rho
varrho \\varrho
sigma \\sigma
Sigma \\Sigma
varsigma \\varsigma
tau \\tau
upsilon \\upsilon
Upsilon \\Upsilon
phi \\phi
Phi \\Phi
varphi \\varphi
chi \\chi
psi \\psi
Psi \\Psi
omega \\omega
Omega \\Omega
digamma \\digamma
Digamma \\Digamma
aleph \\aleph
beth \\beth
gimel \\gimel
daleth \\daleth
cup \\cup
cap \\cap
sqcup \\sqcup
sqcap \\sqcap
subset \\subset
notsubset \\not\\subset
subseteq \\subseteq
nsubseteq \\nsubseteq
sqsubset \\sqsubset
sqsubseteq \\sqsubseteq
sqsupset \\sqsupset
sqsupseteq \\sqsupseteq
supset \\supset
notsupset \\not\\supset
supseteq \\supseteq
nsupseteq \\nsupseteq
in \\in
ni \\ni
notin \\not\\in
not \\not
varnothing \\varnothing
emptyset \\emptyset
setminus \\setminus
equiv \\equiv
forall \\forall
exists \\exists
nexists \\nexists
therefore \\therefore
because \\because
neg \\neg
lnot \\lnot
vee \\vee
lor \\lor
wedge \\wedge
land \\land
vdash \\vdash
dashv \\dashv
models \\models
acute \\acute{$1}$0
breve \\breve{$1}$0
check \\check{$1}$0
mathring \\mathring{$1}$0
grave \\grave{$1}$0
dot \\dot{$1}$0
ddot \\ddot{$1}$0
hat \\hat{$1}$0
tilde \\tilde{$1}$0
bar \\bar{$1}$0
vec \\vec{$1}$0
mathbf \\mathbf{$1}$0
mathbb \\mathbb{$1}$0
mathcal \\mathcal{$1}$0
mathfrak \\mathfrak{$1}$0
mathscr \\mathscr{$1}$0
overline \\overline{$1}$0
widehat \\widehat{$1}$0
widetilde \\widetilde{$1}$0
overbrace \\overbrace{$1}^{$2}$0
underbrace \\underbrace{$1}_{$2}$0
sin \\sin
cos \\cos
tan \\tan
sec \\sec
csc \\csc
cot \\cot
exp \\exp
log \\log_{$1} $0
ln \\ln
lg \\lg
sinh \\sinh
cosh \\cosh
tanh \\tanh
coth \\coth
det \\det
dim \\dim
ker \\ker
deg \\deg
arg \\arg
gcd \\gcd
arcsin \\arcsin
arccos \\arccos
arctan \\arctan
arccsc \\operatorname{arccsc}
arcsec \\operatorname{arcsec}
arccot \\operatorname{arccot}
arsinh \\operatorname{arsinh}
arcosh \\operatorname{arcosh}
artanh \\operatorname{artanh}
csch \\operatorname{csch}
sech \\operatorname{sech}
arcsch \\operatorname{arcsch}
arsech \\operatorname{arsech}
arcoth \\operatorname{arcoth}
min \\min
max \\max
inf \\inf
sup \\sup
liminf \\liminf
limsup \\limsup
lim \\lim_{${1:x} \\to ${2:\\infty}} $0
leq \\leq
geq \\geq
neq \\neq
leqslant \\leqslant
geqslant \\geqslant
ll \\ll
lll \\lll
gg \\gg
ggg \\ggg
nless \\nless
nleq \\nleq
nleqslant \\nleqslant
ngtr \\ngtr
ngeq \\ngeq
ngeqslant \\ngeqslant
approx \\approx
asymp \\asymp
prec \\prec
nprec \\nprec
preceq \\preceq
npreceq \\npreceq
succ \\succ
nsucc \\nsucc
succeq \\succeq
nsucceq \\nsucceq
propto \\propto
doteq \\doteq
triangle \\triangle
triangleright \\triangleright
triangleleft \\triangleleft
angle \\angle
measuredangle \\measuredangle
ell \\ell
parallel \\parallel
nparallel \\nparallel
bowtie \\bowtie
perp \\perp
notperp \\not\\perp
smile \\smile
frown \\frown
circ \\circ
degree \\degree
cong \\cong
ncong \\ncong
sim \\sim
simeq \\simeq
nsim \\nsim
bullet \\bullet
diamond \\diamond
uplus \\uplus
oplus \\oplus
ominus \\ominus
odot \\odot
otimes \\otimes
oslash \\oslash
upharpoonright \\upharpoonright
cdot \\cdot
cdots \\cdots
ldots \\ldots
vdots \\vdots
ddots \\ddots
pm \\pm
mp \\mp
times \\times
div \\div
ast \\ast
mid \\mid
nmid \\nmid
partial \\partial
nabla \\nabla
hbar \\hbar
star \\star
surd \\surd
checkmark \\checkmark
bigcirc \\bigcirc
amalg \\amalg
bigtriangleup \\bigtriangleup
bigtriangledown \\bigtriangledown
dagger \\dagger
ddagger \\ddagger
wr \\wr
wp \\wp
Re \\Re
Im \\Im
imath \\imath
jmath \\jmath
eth \\eth
prime \\prime
Box \\Box
bot \\bot
top \\top
infty \\infty
sum \\sum_{$1}^{$2}$0
prod \\prod_{$1}^{$2}$0
int \\int_{$1}^{$2}$0
iint \\iint_{$1}^{$2}$0
iiint \\iiint_{$1}^{$2}$0
oint \\oint_{$1}^{$2}$0
bigcup \\bigcup_{$1}^{$2}$0
bigcap \\bigcap_{$1}^{$2}$0
bigvee \\bigvee_{$1}^{$2}$0
bigwedge \\bigwedge_{$1}^{$2}$0
coprod \\coprod_{$1}^{$2}$0
biguplus \\biguplus_{$1}^{$2}$0
bigodot \\bigodot_{$1}^{$2}$0
bigoplus \\bigoplus_{$1}^{$2}$0
bigotimes \\bigotimes_{$1}^{$2}$0
iff \\iff
implies \\implies
rightarrow \\rightarrow
to \\to
nrightarrow \\nrightarrow
longrightarrow \\longrightarrow
Rightarrow \\Rightarrow
Longrightarrow \\Longrightarrow
Leftarrow \\Leftarrow
Longleftarrow \\Longleftarrow
Leftrightarrow \\Leftrightarrow
Longleftrightarrow \\Longleftrightarrow
nRightarrow \\nRightarrow
leadsto \\leadsto
mapsto \\mapsto
longmapsto \\longmapsto
longleftarrow \\longleftarrow
leftarrow \\leftarrow
gets \\gets
leftrightarrow \\leftrightarrow
longleftrightarrow \\longleftrightarrow
downarrow \\downarrow
Downarrow \\Downarrow
uparrow \\uparrow
Uparrow \\Uparrow
updownarrow \\updownarrow
Updownarrow \\Updownarrow
hookleftarrow \\hookleftarrow
hookrightarrow \\hookrightarrow
leftharpoonup \\leftharpoonup
rightharpoonup \\rightharpoonup
leftharpoondown \\leftharpoondown
rightharpoondown \\rightharpoondown
rightleftharpoons \\rightleftharpoons
nearrow \\nearrow
searrow \\searrow
nwarrow \\nwarrow
swarrow \\swarrow
overrightarrow \\overrightarrow{$1}$0
underrightarrow \\underrightarrow{$1}$0
overleftarrow \\overleftarrow{$1}$0
underleftarrow \\underleftarrow{$1}$0
overleftrightarrow \\overleftrightarrow{$1}$0
underleftrightarrow \\underleftrightarrow{$1}$0
begin \\begin{$1}","\t$2","\\end{$1}", "$0
text \\text{$1}$0
operatorname \\operatorname{$1}$0
displaystyle \\displaystyle
textbackslash \\textbackslash

Markdown Preview

Ctrl+Shift+M 切换预览。

详见:https://shd101wyy.github.io/markdown-preview-enhanced/#/zh-cn/

发表评论

电子邮件地址不会被公开。 必填项已用*标注