Skip to content

Commit c7bd2f6

Browse files
committed
webview: Add LaTeX math support!
This incorporates the same KaTeX library we use in the Zulip webapp. We add the dependency, add a build-webview step to copy the needed files, and apply the stylesheet in our WebView HTML. There are a couple of cases where the resulting HTML and CSS doesn't quite look right. We'll go on to take care of those in upcoming commits. Fixes: #2660
1 parent bda44bd commit c7bd2f6

File tree

4 files changed

+29
-1
lines changed

4 files changed

+29
-1
lines changed

package.json

+1
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@
4040
"blueimp-md5": "^2.10.0",
4141
"color": "^3.0.0",
4242
"date-fns": "^1.29.0",
43+
"katex": "^0.11.1",
4344
"lodash.escape": "^4.0.1",
4445
"lodash.isequal": "^4.4.0",
4546
"lodash.omit": "^4.5.0",

src/webview/css/css.js

+1
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import cssNight from './cssNight';
66

77
export default (theme: ThemeName) => `
88
<link rel='stylesheet' type='text/css' href='./base.css'>
9+
<link rel='stylesheet' type='text/css' href='./katex/katex.min.css'>
910
<style>
1011
${theme === 'night' ? cssNight : ''}
1112
${cssPygments(theme === 'night')}

tools/build-webview

+20-1
Original file line numberDiff line numberDiff line change
@@ -156,8 +156,27 @@ sync() {
156156
--filter='. /dev/stdin'
157157
}
158158

159-
# Sync the directory structure, preserving metadata.
159+
# Copy over files from KaTeX.
160+
sync "${root}/node_modules/katex/dist" "${dest}/katex" <<EOF
161+
+ /katex.min.css
162+
163+
# The KaTeX JS renders LaTeX code into HTML and MathML.
164+
# Our webview already has HTML and MathML, and just needs to style it.
165+
#+ /katex.min.js
166+
167+
# The woff2 font format is preferred for browsers that support it,
168+
# which include Chrome 36+ and Mobile Safari 10+. So that's all we need.
169+
+ /fonts/
170+
+ /fonts/*.woff2
171+
172+
- *
173+
EOF
174+
175+
# Copy over our own files.
160176
sync "${root}/src/webview/static" "${dest}" <<EOF
177+
# Leave alone the katex directory we just made.
178+
-,r /katex
179+
161180
+ /index.html
162181
+ /base.css
163182
- *

yarn.lock

+7
Original file line numberDiff line numberDiff line change
@@ -5665,6 +5665,13 @@ jszip@^3.1.5:
56655665
readable-stream "~2.3.6"
56665666
set-immediate-shim "~1.0.1"
56675667

5668+
katex@^0.11.1:
5669+
version "0.11.1"
5670+
resolved "https://registry.yarnpkg.com/katex/-/katex-0.11.1.tgz#df30ca40c565c9df01a466a00d53e079e84ffaa2"
5671+
integrity sha512-5oANDICCTX0NqYIyAiFCCwjQ7ERu3DQG2JFHLbYOf+fXaMoH8eg/zOq5WSYJsKMi/QebW+Eh3gSM+oss1H/bww==
5672+
dependencies:
5673+
commander "^2.19.0"
5674+
56685675
katex@^0.7.1:
56695676
version "0.7.1"
56705677
resolved "https://registry.yarnpkg.com/katex/-/katex-0.7.1.tgz#06bb5298efad05e1e7228035ba8e1591f3061b8f"

0 commit comments

Comments
 (0)