patrick/KaTeX
1
0
Fork 0
mirror of https://github.com/Smaug123/KaTeX synced 2025-10-10 05:28:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add HTML extension (#2082)

Browse Source 
* Add html extension

* Fix flow error

* Update documentation

* Add tests

* Call buildA11yStrings for "html" node

* Throw ParseError when parsing \htmlData fails

* Improve documentation

* Add a screenshotter test

* Add dummy screenshot

* Update screenshots
This commit is contained in:
ylemkimon
2019-12-02 07:49:28 +09:00
committed by Kevin Barabash
parent 9d8195c793
commit e5333ad04d
17 changed files with 408 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

220
test/__snapshots__/katex-spec.js.snap
View File

@@ -624,6 +624,226 @@ exports[`A parser that does not throw on unsupported commands should properly es
`;
exports[`An HTML extension builder should not affect spacing 1`] = `
[
{
"attributes": {
"id": "a"
},
"children": [
{
"classes": [
"mord",
"mathdefault"
],
"depth": 0,
"height": 0.43056,
"italic": 0,
"maxFontSize": 1,
"skew": 0.02778,
"style": {
},
"text": "x",
"width": 0.57153
},
{
"attributes": {
},
"children": [
],
"classes": [
"mspace"
],
"depth": 0,
"height": 0,
"maxFontSize": 0,
"style": {
"marginRight": "0.2222222222222222em"
}
},
{
"classes": [
"mbin"
],
"depth": 0.08333,
"height": 0.58333,
"italic": 0,
"maxFontSize": 1,
"skew": 0,
"style": {
},
"text": "+",
"width": 0.77778
},
{
"attributes": {
},
"children": [
],
"classes": [
"mspace"
],
"depth": 0,
"height": 0,
"maxFontSize": 0,
"style": {
"marginRight": "0.2222222222222222em"
}
}
],
"classes": [
"enclosing"
],
"depth": 0.08333,
"height": 0.58333,
"maxFontSize": 1,
"style": {
}
},
{
"classes": [
"mord",
"mathdefault"
],
"depth": 0.19444,
"height": 0.43056,
"italic": 0.03588,
"maxFontSize": 1,
"skew": 0.05556,
"style": {
},
"text": "y",
"width": 0.49028
}
]
`;
exports[`An HTML extension builder should render with trust and strict setting 1`] = `
[
{
"attributes": {
"id": "bar"
},
"children": [
{
"classes": [
"mord",
"mathdefault"
],
"depth": 0,
"height": 0.43056,
"italic": 0,
"maxFontSize": 1,
"skew": 0.02778,
"style": {
},
"text": "x",
"width": 0.57153
}
],
"classes": [
"enclosing"
],
"depth": 0,
"height": 0.43056,
"maxFontSize": 1,
"style": {
}
},
{
"attributes": {
},
"children": [
{
"classes": [
"mord",
"mathdefault"
],
"depth": 0,
"height": 0.43056,
"italic": 0,
"maxFontSize": 1,
"skew": 0.02778,
"style": {
},
"text": "x",
"width": 0.57153
}
],
"classes": [
"enclosing",
"foo"
],
"depth": 0,
"height": 0.43056,
"maxFontSize": 1,
"style": {
}
},
{
"attributes": {
"style": "color: red;"
},
"children": [
{
"classes": [
"mord",
"mathdefault"
],
"depth": 0,
"height": 0.43056,
"italic": 0,
"maxFontSize": 1,
"skew": 0.02778,
"style": {
},
"text": "x",
"width": 0.57153
}
],
"classes": [
"enclosing"
],
"depth": 0,
"height": 0.43056,
"maxFontSize": 1,
"style": {
}
},
{
"attributes": {
"data-bar": "b",
"data-foo": "a"
},
"children": [
{
"classes": [
"mord",
"mathdefault"
],
"depth": 0,
"height": 0.43056,
"italic": 0,
"maxFontSize": 1,
"skew": 0.02778,
"style": {
},
"text": "x",
"width": 0.57153
}
],
"classes": [
"enclosing"
],
"depth": 0,
"height": 0.43056,
"maxFontSize": 1,
"style": {
}
}
]
`;
exports[`An implicit group parser within optional groups should work style commands \\sqrt[\\textstyle 3]{x} 1`] = `
[
{

30
test/katex-spec.js
View File

@@ -2011,6 +2011,36 @@ describe("An includegraphics builder", function() {
});
});
describe("An HTML extension builder", function() {
const html =
"\\htmlId{bar}{x}\\htmlClass{foo}{x}\\htmlStyle{color: red;}{x}\\htmlData{foo=a, bar=b}{x}";
const trustNonStrictSettings = new Settings({trust: true, strict: false});
it("should not fail", function() {
expect(html).toBuild(trustNonStrictSettings);
});
it("should set HTML attributes", function() {
const built = getBuilt(html, trustNonStrictSettings);
expect(built[0].attributes.id).toMatch("bar");
expect(built[1].classes).toContain("foo");
expect(built[2].attributes.style).toMatch("color: red");
expect(built[3].attributes).toEqual({
"data-bar": "b",
"data-foo": "a",
});
});
it("should not affect spacing", function() {
const built = getBuilt("\\htmlId{a}{x+}y", trustNonStrictSettings);
expect(built).toMatchSnapshot();
});
it("should render with trust and strict setting", function() {
const built = getBuilt(html, trustNonStrictSettings);
expect(built).toMatchSnapshot();
});
});
describe("A bin builder", function() {
it("should create mbins normally", function() {
const built = getBuilt`x + y`;

BIN
test/screenshotter/images/HTML-chrome.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.2 KiB

BIN
test/screenshotter/images/HTML-firefox.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.1 KiB

3
test/screenshotter/ss_data.yaml
View File

@@ -149,6 +149,9 @@ GroupMacros:
\endExp: \egroup
tex: \startExp a+b\endExp
HorizontalBraces: \overbrace{\displaystyle{\oint_S{\vec E\cdot\hat n\,\mathrm d a}}}^\text{emf} = \underbrace{\frac{q_{\text{enc}}}{\varepsilon_0}}_{\text{charge}}
HTML:
tex: \htmlId{a}{a+}b\htmlStyle{color:red;}{+c}
nolatex: HTML extension not supported by LaTeX
Includegraphics: |
\def\logo{\includegraphics[height=0.8em, totalheight=0.9em, width=0.9em, alt=KA logo]{../../website/static/img/khan-academy.png}}
\def\logoB{\includegraphics[height=0.4em, totalheight=0.9em, width=0.9em, alt=KA logo]{../../website/static/img/khan-academy.png}}

1
test/screenshotter/test.html
View File

@@ -71,6 +71,7 @@
var settings = {
displayMode: !!query["display"],
throwOnError: !query["noThrow"],
strict: false,
trust: true // trust test inputs
};
if (query["errorColor"]) {