Skip to content

Commit

Permalink
Add <script> tags and inline code (#5)
Browse files Browse the repository at this point in the history
## What
Add <script> tags and inline code (to override the original inline
style) when outputting HTML.

## Why
The currently exported MathML style html does not perform well in
browsers like Chrome, mainly in terms of curly braces

## How to test
tm:

![图片](https://github.com/user-attachments/assets/7e1f2a46-91b8-4735-a28e-87da8e1c60f3)

html:

![图片](https://github.com/user-attachments/assets/2142df64-f611-4c54-b322-11f720aefd34)

html opened in browser before(chrome):

![图片](https://github.com/user-attachments/assets/d3aa9bc6-655b-4216-8313-969357e2b4ed)


html opened in browser after(chrome):

![图片](https://github.com/user-attachments/assets/70b40e17-abe9-4de5-a22b-0aa6823636b6)
  • Loading branch information
ATQlove authored Sep 6, 2024
1 parent 11a8cce commit dad1105
Show file tree
Hide file tree
Showing 3 changed files with 124 additions and 48 deletions.
61 changes: 13 additions & 48 deletions progs/convert/html/tmhtml.scm
Original file line number Diff line number Diff line change
Expand Up @@ -209,9 +209,13 @@
(title (tmhtml-find-title doc))
(css `(h:style (@ (type "text/css")) ,(tmhtml-css-header)))
(xhead '())
(body (tmhtml doc)))
(set! tmhtml-site-version
(with-extract doc "html-site-version"))
;; Use a single string for the JavaScript code block
(js-inline `((h:script (@ (type "text/javascript"))
"(function () {\"use strict\"; window.addEventListener(\"load\", function () { var box, div, link, namespaceURI; namespaceURI = 'http://www.w3.org/1998/Math/MathML'; if (document.body.getElementsByTagNameNS(namespaceURI, 'math')[0]) { document.body.insertAdjacentHTML('afterbegin', '<div style=\\\"border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;\\\"><math xmlns=\\\"' + namespaceURI + '\\\"><mspace height=\\\"23px\\\" width=\\\"77px\\\"></mspace></math></div>'); div = document.body.firstChild; box = div.firstChild.firstChild.getBoundingClientRect(); document.body.removeChild(div); if (Math.abs(box.height - 23) > 1 || Math.abs(box.width - 77) > 1) { link = document.createElement('link'); link.href = 'https://fred-wang.github.io/mathml.css/mathml.css'; link.rel = 'stylesheet'; document.head.appendChild(link); } } }); })();")))
(scripts `((h:script (@ (type "text/javascript")))
(h:script "document.querySelectorAll('style').forEach(style => style.remove());")))
(body (append scripts (tmhtml doc))))

(set! title
(cond ((with-extract doc "html-title")
(with-extract doc "html-title"))
Expand All @@ -223,63 +227,24 @@
`(concat ,(tmhtml-force-string title)
" (FSF GNU project)"))
(else (tmhtml-force-string title))))

(set! css
(cond ((with-extract doc "html-css")
`(h:link (@ (rel "stylesheet")
(href ,(with-extract doc "html-css"))
(type "text/css"))))
(else css)))
(if (with-extract doc "html-head-javascript-src")
(let* ((src (with-extract doc "html-head-javascript-src"))
(script `(h:script (@ (language "javascript")
(src ,src)))))
(set! xhead (append xhead (list script)))))
(if (with-extract doc "html-head-javascript")
(let* ((code (with-extract doc "html-head-javascript"))
(script `(h:script (@ (language "javascript")) ,code)))
(set! xhead (append xhead (list script)))))
(if (with-extract doc "html-head-favicon")
(let* ((code (with-extract doc "html-head-favicon"))
(icon `(h:link (@ (rel "icon") (href ,code)))))
(set! xhead (append xhead (list icon)))))
(if (and (not (func? css 'h:link))
(string-ends? (get-preference "texmacs->html:css-stylesheet")
".css"))
(with src (get-preference "texmacs->html:css-stylesheet")
(with link-css `(h:link (@ (rel "stylesheet")
(href ,src)
(type "text/css")))
(set! xhead (append xhead (list link-css))))))
(if (tm-func? (with-extract* doc "html-extra-css") 'tuple)
(for (src (cdr (with-extract* doc "html-extra-css")))
(with link-css `(h:link (@ (rel "stylesheet")
(href ,src)
(type "text/css")))
(set! xhead (append xhead (list link-css))))))
(if (tm-func? (with-extract* doc "html-extra-javascript-src") 'tuple)
(for (src (cdr (with-extract* doc "html-extra-javascript-src")))
(with script `(h:script (@ (language "javascript")
(src ,src)
(defer "<implicit>")))
(set! xhead (append xhead (list script))))))
(if (tm-func? (with-extract* doc "html-extra-javascript") 'tuple)
(for (code (cdr (with-extract* doc "html-extra-javascript")))
(with script `(h:script (@ (language "javascript")
(defer "<implicit>")) ,code)
(set! xhead (append xhead (list script))))))

;; Add your JS inline to the <head> section
(set! xhead (append xhead js-inline))

(if tmhtml-mathjax?
(let* ((site "https://cdn.jsdelivr.net/")
(loc "npm/mathjax@3/es5/tex-mml-chtml.js")
(src (string-append site loc))
(script `(h:script (@ (language "javascript") (src ,src)))))
(set! xhead (append xhead (list script)))))
(if (or (in? "tmdoc" styles)
(in? "tmweb" styles) (in? "tmweb2" styles)
(in? "mmxdoc" styles) (in? "magix-web" styles)
(in? "max-web" styles) (in? "node-web" styles))
(set! body (tmhtml-tmdoc-post body)))
(if tmhtml-css?
(set! body (tmhtml-css-post body)))

`(h:html
(h:head
(h:title ,@(tmhtml title))
Expand Down
95 changes: 95 additions & 0 deletions tests/html/matrix.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
<!DOCTYPE html>
<html>
<head>
<title>No title</title>
<meta name="generator" content="MoganSTEMSuite 1.2.9.1" />
<meta charset="UTF-8" />
<style type="text/css">
body { text-align: justify } h5 { display: inline; padding-right: 1em }
h6 { display: inline; padding-right: 1em } table { border-collapse:
collapse } td { padding: 0.2em; vertical-align: baseline } dt { float:
left; min-width: 1.75em; text-align: right; padding-right: 0.75em;
font-weight: bold; } dd { margin-left: 2.75em; padding-bottom: 0.25em; }
dd p { padding-top: 0em; } .subsup { display: inline; vertical-align:
-0.2em } .subsup td { padding: 0px; text-align: left} .fraction {
display: inline; vertical-align: -0.8em } .fraction td { padding: 0px;
text-align: center } .wide { position: relative; margin-left: -0.4em }
.accent { position: relative; margin-left: -0.4em; top: -0.1em }
.title-block { width: 100%; text-align: center } .title-block p {
margin: 0px } .compact-block p { margin-top: 0px; margin-bottom: 0px }
.left-tab { text-align: left } .center-tab { text-align: center }
.balloon-anchor { border-bottom: 1px dotted #000000; outline: none;
cursor: help; position: relative; } .balloon-anchor [hidden] {
margin-left: -999em; position: absolute; display: none; }
.balloon-anchor: hover [hidden] { position: absolute; left: 1em; top:
2em; z-index: 99; margin-left: 0; width: 500px; display: inline-block; }
.balloon-body { } .ornament { border-width: 1px; border-style: solid;
border-color: black; display: inline-block; padding: 0.2em; } .right-tab
{ float: right; position: relative; top: -1em; } .no-breaks {
white-space: nowrap; } .underline { text-decoration: underline; }
.overline { text-decoration: overline; } .strike-through {
text-decoration: line-through; } del { text-decoration: line-through
wavy red; } .fill-out { text-decoration: underline dotted; } math {
font-family: cmr, times, verdana }
</style>
<script type="text/javascript">(function () {"use strict"; window.addEventListener("load",
function () { var box, div, link, namespaceURI; namespaceURI =
'http://www.w3.org/1998/Math/MathML'; if
(document.body.getElementsByTagNameNS(namespaceURI, 'math')[0]) {
document.body.insertAdjacentHTML('afterbegin', '<div style=\"border: 0;
clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding:
0; position: absolute; width: 1px;\"><math xmlns=\"' + namespaceURI +
'\"><mspace height=\"23px\" width=\"77px\"></mspace></math></div>'); div =
document.body.firstChild; box =
div.firstChild.firstChild.getBoundingClientRect();
document.body.removeChild(div); if (Math.abs(box.height - 23) > 1 ||
Math.abs(box.width - 77) > 1) { link = document.createElement('link');
link.href = 'https://fred-wang.github.io/mathml.css/mathml.css'; link.rel
= 'stylesheet'; document.head.appendChild(link); } } }); })();</script>
</head>
<body>
<script type="text/javascript"></script>
<script>document.querySelectorAll('style').forEach(style =>
style.remove());</script>
<center>
<math xmlns="http://www.w3.org/1998/Math/MathML"><mstyle displaystyle="true"><mstyle scriptlevel="1"><mrow><mo form="prefix">(</mo><mtable
columnalign="center center center center center">
<mtr>
<mtd><mn>1</mn></mtd>
<mtd><mrow></mrow></mtd>
<mtd><mrow></mrow></mtd>
<mtd><mrow></mrow></mtd>
<mtd><mrow></mrow></mtd>
</mtr>
<mtr>
<mtd><mrow></mrow></mtd>
<mtd><mn>1</mn></mtd>
<mtd><mrow></mrow></mtd>
<mtd><mrow></mrow></mtd>
<mtd><mrow></mrow></mtd>
</mtr>
<mtr>
<mtd><mrow></mrow></mtd>
<mtd><mrow></mrow></mtd>
<mtd><mn>1</mn></mtd>
<mtd><mrow></mrow></mtd>
<mtd><mrow></mrow></mtd>
</mtr>
<mtr>
<mtd><mrow></mrow></mtd>
<mtd><mrow></mrow></mtd>
<mtd><mrow></mrow></mtd>
<mtd><mn>1</mn></mtd>
<mtd><mrow></mrow></mtd>
</mtr>
<mtr>
<mtd><mrow></mrow></mtd>
<mtd><mrow></mrow></mtd>
<mtd><mrow></mrow></mtd>
<mtd><mrow></mrow></mtd>
<mtd><mn>1</mn></mtd>
</mtr>
</mtable><mo form="postfix">)</mo></mrow></mstyle></mstyle></math>
</center>
</body>
</html>
16 changes: 16 additions & 0 deletions tests/tmu/matrix.tmu
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<TMU|<tuple|1.0.3|1.2.9.1>>

<style|<tuple|generic|chinese>>

<\body>
<\equation*>
<matrix|<tformat|<table|<row|<cell|1>|<cell|>|<cell|>|<cell|>|<cell|>>|<row|<cell|>|<cell|1>|<cell|>|<cell|>|<cell|>>|<row|<cell|>|<cell|>|<cell|1>|<cell|>|<cell|>>|<row|<cell|>|<cell|>|<cell|>|<cell|1>|<cell|>>|<row|<cell|>|<cell|>|<cell|>|<cell|>|<cell|1>>>>>
</equation*>
</body>

<\initial>
<\collection>
<associate|page-medium|paper>
<associate|page-screen-margin|false>
</collection>
</initial>

0 comments on commit dad1105

Please sign in to comment.