Skip to content

Commit

Permalink
webview: Add LaTeX math support!
Browse files Browse the repository at this point in the history
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.

[greg: adapted to this build-webview structure]

Fixes: zulip#2660
  • Loading branch information
rk-for-zulip authored and gnprice committed Mar 27, 2020
1 parent ca4fd27 commit f28922e
Show file tree
Hide file tree
Showing 4 changed files with 29 additions and 1 deletion.
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@
"blueimp-md5": "^2.10.0",
"color": "^3.0.0",
"date-fns": "^1.29.0",
"katex": "^0.11.1",
"lodash.escape": "^4.0.1",
"lodash.isequal": "^4.4.0",
"lodash.omit": "^4.5.0",
Expand Down
1 change: 1 addition & 0 deletions src/webview/css/css.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import cssNight from './cssNight';

export default (theme: ThemeName) => `
<link rel='stylesheet' type='text/css' href='./base.css'>
<link rel='stylesheet' type='text/css' href='./katex/katex.min.css'>
<style>
${theme === 'night' ? cssNight : ''}
${cssPygments(theme === 'night')}
Expand Down
21 changes: 20 additions & 1 deletion tools/build-webview
Original file line number Diff line number Diff line change
Expand Up @@ -156,8 +156,27 @@ sync() {
--filter='. /dev/stdin'
}

# Sync the directory structure, preserving metadata.
# Copy over files from KaTeX.
sync "${root}/node_modules/katex/dist" "${dest}/katex" <<EOF
+ /katex.min.css
# The KaTeX JS renders LaTeX code into HTML and MathML.
# Our webview already has HTML and MathML, and just needs to style it.
#+ /katex.min.js
# The woff2 font format is preferred for browsers that support it,
# which include Chrome 36+ and Mobile Safari 10+. So that's all we need.
+ /fonts/
+ /fonts/*.woff2
- *
EOF

# Copy over our own files.
sync "${root}/src/webview/static" "${dest}" <<EOF
# Leave alone the katex directory we just made.
-,r /katex
+ /index.html
+ /base.css
- *
Expand Down
7 changes: 7 additions & 0 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -5665,6 +5665,13 @@ jszip@^3.1.5:
readable-stream "~2.3.6"
set-immediate-shim "~1.0.1"

katex@^0.11.1:
version "0.11.1"
resolved "https://registry.yarnpkg.com/katex/-/katex-0.11.1.tgz#df30ca40c565c9df01a466a00d53e079e84ffaa2"
integrity sha512-5oANDICCTX0NqYIyAiFCCwjQ7ERu3DQG2JFHLbYOf+fXaMoH8eg/zOq5WSYJsKMi/QebW+Eh3gSM+oss1H/bww==
dependencies:
commander "^2.19.0"

katex@^0.7.1:
version "0.7.1"
resolved "https://registry.yarnpkg.com/katex/-/katex-0.7.1.tgz#06bb5298efad05e1e7228035ba8e1591f3061b8f"
Expand Down

0 comments on commit f28922e

Please sign in to comment.