Support external stylesheet for html rendered latex.

[ngaurav]

Katex does server side rendering of latex files and outputs a html snippet.

A sample output is:

And its corresponding html is

<span class="katex-html" aria-hidden="true">
	<span class="base">
		<span class="strut" style="height:1.23692em;vertical-align:-0.25em;"></span>
		<span class="mopen">(</span>
		<span class="mopen">(</span>
		<span class="mopen">(</span>
		<span class="mord mathdefault" style="margin-right:0.03588em;">y</span>
		<span class="mclose">
			<span class="mclose">)</span>
			<span class="msupsub">
				<span class="vlist-t">
					<span class="vlist-r">
						<span class="vlist" style="height:0.664392em;">
							<span style="top:-3.063em;margin-right:0.05em;">
								<span class="pstrut" style="height:2.7em;"></span>
								<span class="sizing reset-size6 size3 mtight">
									<span class="mord mathdefault mtight" style="margin-right:0.03588em;">y</span>
								</span>
							</span>
						</span>
					</span>
				</span>
			</span>
		</span>
		<span class="mclose">
			<span class="mclose">)</span>
			<span class="msupsub">
				<span class="vlist-t">
					<span class="vlist-r">
						<span class="vlist" style="height:0.664392em;">
							<span style="top:-3.063em;margin-right:0.05em;">
								<span class="pstrut" style="height:2.7em;"></span>
								<span class="sizing reset-size6 size3 mtight">
									<span class="mord mathdefault mtight" style="margin-right:0.03588em;">y</span>
								</span>
							</span>
						</span>
					</span>
				</span>
			</span>
		</span>
		<span class="mclose">
			<span class="mclose">)</span>
			<span class="msupsub">
				<span class="vlist-t">
					<span class="vlist-r">
						<span class="vlist" style="height:0.9869199999999999em;">
							<span style="top:-3.063em;margin-right:0.05em;">
								<span class="pstrut" style="height:2.7em;"></span>
								<span class="sizing reset-size6 size3 mtight">
									<span class="mord mtight">
										<span class="mord mtight">
											<span class="mord mathdefault mtight" style="margin-right:0.03588em;">y</span>
											<span class="msupsub">
												<span class="vlist-t">
													<span class="vlist-r">
														<span class="vlist" style="height:0.8913142857142857em;">
															<span style="top:-2.931em;margin-right:0.07142857142857144em;">
																<span class="pstrut" style="height:2.5em;"></span>
																<span class="sizing reset-size3 size1 mtight">
																	<span class="mord mtight">2</span>
																</span>
															</span>
														</span>
													</span>
												</span>
											</span>
										</span>
										<span class="mbin mtight">−</span>
										<span class="mord mtight">1</span>
									</span>
								</span>
							</span>
						</span>
					</span>
				</span>
			</span>
		</span>
		<span class="mspace" style="margin-right:0.2777777777777778em;"></span>
		<span class="mrel">=</span>
		<span class="mspace" style="margin-right:0.2777777777777778em;"></span>
	</span>
	<span class="base">
		<span class="strut" style="height:0.64444em;vertical-align:0em;"></span>
		<span class="mord">2</span>
		<span class="mord">7</span>
	</span>
</span>

This html code has some classes which can be rendered with an external css from this CDN:
https://cdn.jsdelivr.net/npm/katex@0.10.2/dist/katex.css

I analysed this css file using word-frequency counter and luckily it uses very few (48) css style attributes:

These are the ones which occur more than once:
font-size, font-family, font-style, display, font-weight, src, position, width, text-align, overflow, right, left, padding, margin-right, border-bottom-style, min-width, margin-left, height, border, whitespace, vertical-align, stroke, min-height, margin, content, border-right

These are the ones which occur only once:
text-rendering, text-indent, table-layout, stroke-width, stroke-opacity, stroke-miter-limit, stroke-line-join, stroke-line-cap, stroke-dash-offset, stroke-dash-array, ms-high-contrast-adjust, max-width, max-height, line-height, font, fill-rule, fill-opacity, fill, clip, box-sizing, border-style, border-bottom-width.

It would be great if support for above css attributes can be added as it would mean, this library can be the first library to support latex on flutter without any serious performance lag.

[Sub6Resources]

Great use case! I'll keep this in mind as I decide what CSS attributes are most important to support.

[tneotia]

Technically #577 will add support for this (if the feature is approved) - you don't have to parse your latex to HTML and instead just do r'<tex> latex_string_here </tex>' and it will be rendered.

[tneotia]

PR created above. This will only support the currently supported inline CSS elements so it doesn't have all of the ones listed in OP.

[erickok]

CSS via <style> tags is now supported, check flutter_html 2.1.0

[FazalHussain]

When external CSS is expected to support?