4 |
5 |
4 |
5 | 
**少数派：**[不支持 LaTeX 也能插入数学公式，这个小插件帮你实现「徒手渲染」](https://sspai.com/post/61877)。
20 | - 
**Medium:** [VS Code Math to Image: Write LaTeX Math Equations in GitHub Markdown the Easy Way!](https://medium.com/spencerweekly/vs-code-math-to-image-write-latex-math-equations-in-github-markdown-the-easy-way-9fa8b81dc910?source=friends_link&sk=cff035b443fb81f5b20a47370f23aed3)
21 |
22 | vscode-math-to-image rendering
, discovered in 1905 by Albert Einstein.
99 |
--------------------------------------------------------------------------------
/examples/svg/9GYiSwRTee.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/examples/svg/tbOH9fuFKM.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/examples/svg/zRKV2EFdAA.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "vscode-math-to-image",
3 | "displayName": "Math to Image",
4 | "description": "📐 Render LaTeX math equations in any Markdown file",
5 | "license": "MIT",
6 | "version": "0.1.1",
7 | "publisher": "MeowTeam",
8 | "engines": {
9 | "vscode": "^1.47.0"
10 | },
11 | "categories": [
12 | "Other"
13 | ],
14 | "icon": "assets/vscode-math-to-image.png",
15 | "galleryBanner": {
16 | "color": "#2b3838",
17 | "theme": "dark"
18 | },
19 | "homepage": "https://github.com/TeamMeow/vscode-math-to-image",
20 | "bugs": {
21 | "url": "https://github.com/TeamMeow/vscode-math-to-image/issues"
22 | },
23 | "repository": {
24 | "type": "git",
25 | "url": "https://github.com/TeamMeow/vscode-math-to-image"
26 | },
27 | "activationEvents": [
28 | "onCommand:vscode-math-to-image.render-selection-remote",
29 | "onCommand:vscode-math-to-image.render-selection-local"
30 | ],
31 | "main": "./out/extension.js",
32 | "contributes": {
33 | "commands": [
34 | {
35 | "command": "vscode-math-to-image.render-selection-remote",
36 | "title": "Math » Image: Insert rendered equation (remote)"
37 | },
38 | {
39 | "command": "vscode-math-to-image.render-selection-local",
40 | "title": "Math » Image: Insert rendered equation (local)"
41 | }
42 | ],
43 | "menus": {
44 | "editor/context": [
45 | {
46 | "command": "vscode-math-to-image.render-selection-remote",
47 | "when": "resourceLangId == markdown && editorFocus && editorHasSelection",
48 | "group": "modification"
49 | },
50 | {
51 | "command": "vscode-math-to-image.render-selection-local",
52 | "when": "resourceLangId == markdown && editorFocus && editorHasSelection",
53 | "group": "modification"
54 | }
55 | ]
56 | },
57 | "configuration": {
58 | "title": "vscode-math-to-image",
59 | "properties": {
60 | "vscode-math-to-image.svgSavePath": {
61 | "type": "string",
62 | "default": "Current workspace directory",
63 | "enum": [
64 | "Current file directory",
65 | "Current workspace directory"
66 | ],
67 | "enumDescriptions": [
68 | "Generated SVG files will be put in a folder under current file's directory.",
69 | "Generated SVG files will be put in a folder under current workspace directory."
70 | ]
71 | },
72 | "vscode-math-to-image.remoteRenderEngine": {
73 | "type": "string",
74 | "default": "GitHub",
75 | "enum": [
76 | "GitHub",
77 | "CodeCogs"
78 | ],
79 | "enumDescriptions": [
80 | "Equations will be rendered with GitHub's rendering engine remotely.",
81 | "Equations will be rendered with CodeCogs' rendering engine remotely."
82 | ]
83 | },
84 | "vscode-math-to-image.insertionType": {
85 | "type": "string",
86 | "default": "HTML",
87 | "enum": [
88 | "HTML",
89 | "Markdown"
90 | ],
91 | "enumDescriptions": [
92 | "Equations will be inserted as HTML.",
93 | "Equations will be inserted as Markdown. Note that this doesn't support styles!"
94 | ]
95 | },
96 | "vscode-math-to-image.inlineSvgStyle": {
97 | "type": "string",
98 | "default": "transform: translateY(0.1em); background: white;",
99 | "description": "Optional style for rendered inline SVG equations. (Only supported when inserting as HTML)"
100 | },
101 | "vscode-math-to-image.displaySvgStyle": {
102 | "type": "string",
103 | "default": "background: white;",
104 | "description": "Optional style for rendered display SVG equations. (Only supported when inserting as HTML)"
105 | }
106 | }
107 | }
108 | },
109 | "scripts": {
110 | "vscode:prepublish": "npm run compile",
111 | "compile": "tsc -p ./",
112 | "lint": "eslint src --ext ts",
113 | "watch": "tsc -watch -p ./",
114 | "pretest": "npm run compile && npm run lint",
115 | "test": "node ./out/test/runTest.js",
116 | "deploy": "vsce publish"
117 | },
118 | "devDependencies": {
119 | "@types/glob": "^7.1.1",
120 | "@types/mocha": "^7.0.2",
121 | "@types/node": "^13.11.0",
122 | "@types/vscode": "^1.47.0",
123 | "@typescript-eslint/eslint-plugin": "^2.30.0",
124 | "@typescript-eslint/parser": "^2.30.0",
125 | "eslint": "^6.8.0",
126 | "glob": "^7.1.6",
127 | "mocha": "^7.1.2",
128 | "typescript": "^3.8.3",
129 | "vsce": "^1.77.0",
130 | "vscode-test": "^1.3.0"
131 | },
132 | "dependencies": {
133 | "mathjax": "^3.1.2",
134 | "mathjax-full": "^3.1.2"
135 | }
136 | }
137 |
--------------------------------------------------------------------------------
/src/extension.ts:
--------------------------------------------------------------------------------
1 | import * as vscode from 'vscode'
2 | import * as fs from 'fs'
3 | import * as path from 'path'
4 |
5 | let editor = vscode.window.activeTextEditor
6 |
7 | enum RenderType {
8 | REMOTE,
9 | LOCAL,
10 | }
11 | enum MathType {
12 | INLINE,
13 | DISPLAY,
14 | }
15 |
16 | /**
17 | * Get absolute SVG file path to write
18 | *
19 | * @param fileName Name of SVG file
20 | */
21 | function getSVGPath(fileName: string) {
22 | const svgSavePathConf = vscode.workspace.getConfiguration().get('vscode-math-to-image.svgSavePath')
23 | const currentPath: string = editor?.document.uri.fsPath!
24 | let folderPath = ''
25 |
26 | if (svgSavePathConf === 'Current file directory') {
27 | folderPath = path.dirname(currentPath)
28 | } else {
29 | folderPath = vscode.workspace.workspaceFolders ? vscode.workspace.workspaceFolders[0].uri.fsPath : ''
30 | }
31 |
32 | return path.join(folderPath, 'svg', fileName)
33 | }
34 |
35 | /**
36 | * Write rendered SVG content to local SVG file
37 | *
38 | * @param filePath Path to write generated SVG file
39 | * @param fileContent SVG content to write to file
40 | */
41 | function writeSVGFile(filePath: string, fileContent: string) {
42 | const dirPath = path.dirname(filePath)
43 | if (!fs.existsSync(dirPath)) {
44 | fs.mkdir(dirPath, { recursive: true }, (err: any) => {
45 | if (err) {
46 | vscode.window.showErrorMessage(`Failed to create SVG folder at ${dirPath}.`)
47 | return
48 | }
49 | })
50 | }
51 | fs.writeFile(filePath, fileContent, (err: any) => {
52 | if (err) {
53 | vscode.window.showErrorMessage(`Failed to create SVG file at ${filePath}.`)
54 | }
55 | })
56 | }
57 |
58 | /**
59 | * Generate a random filename
60 | *
61 | * @param len Length of the generated filename
62 | * @param ext Intended file extension
63 | */
64 | function randomFilename(len: number, ext: string) {
65 | const digits = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('')
66 |
67 | // Create an array with length len and fill with random digits
68 | const sequence = [...Array(len)].map(_ => {
69 | return digits[Math.floor(Math.random() * digits.length)]
70 | })
71 | return `${sequence.join('')}.${ext}`
72 | }
73 |
74 | function generateEquationHtml(src: string, mathType: MathType) {
75 | const inlineStyle = vscode.workspace.getConfiguration().get("vscode-math-to-image.inlineSvgStyle")
76 | const displayStyle = vscode.workspace.getConfiguration().get("vscode-math-to-image.displaySvgStyle")
77 |
78 | if (mathType === MathType.DISPLAY) {
79 | return `\n\n