Use context for Latex Render Color

src/components/latex.js

@@ -1,14 +1,18 @@
 import style from './latex.css';
-import { Component } from 'preact';
+import {useContext} from "preact/hooks";
+import LatexRenderColor from "../contexts/LatexRenderColor";
 
-export default class Latex extends Component {
-	render() {
-		let equation = `{\\color{White} ${this.props.children} }`;
-		return (
-			<img src={`https://latex.codecogs.com/svg.latex?${equation}`}
-				 alt={this.props.children}
-			     title={this.props.children}
-			     class={style.latex}
-			/>);
-	}
-}
+export default function(props) {
+	let renderColor = useContext(LatexRenderColor);
+
+	// black, blue, brown, cyan, darkgray, gray, green, lightgray, lime, magenta, olive, orange, pink, purple, red, teal, violet, white, yellow
+	let inline = props.inline ? `\\inline` : "";
+
+	let equation = `${inline} {\\color{${renderColor}} ${props.children} }`;
+	return (
+		<img src={`https://latex.codecogs.com/svg.latex?${equation}`}
+			 alt={props.children}
+			 title={props.children}
+			 class={style.latex}
+		/>);
+}

src/contexts/LatexRenderColor.js

@@ -0,0 +1,3 @@
+import {createContext} from "preact";
+
+export default createContext("White");

src/index.js

@@ -22,25 +22,28 @@ import OttimizzazioneLineare from "./routes/ottimizzazioneLineare";
 import BasiDiDati from './routes/basiDiDati';
 import CalcoloNumerico from './routes/calcoloNumerico';
 import ApprendimentoSistemiArtificiali from "./routes/apprendimentoSistemiArtificiali";
+import LatexRenderColor from "./contexts/LatexRenderColor";
 
 // noinspection JSUnusedGlobalSymbols
 export default class App extends Component {
 	render() {
 		return (
 			<div id="app">
-				<h1><a href="/">Appuntiweb</a> <small>di <a href="https://steffo.eu/">Steffo</a></small></h1>
-				<Router history={createHashHistory()}>
-					<Home path="/"/>
-					<Fisica path="/fisica"/>
-					<VlDiGeometria path="/vldigeometria"/>
-					<MingwInstall path="/mingwinstall"/>
-					<Statistica path="/statistica"/>
-					<OttimizzazioneLineare path="/ottimizzazionelineare"/>
-					<BasiDiDati path="/basididati"/>
-					<CalcoloNumerico path="/calcolonumerico"/>
-					<ApprendimentoSistemiArtificiali path={"/apprendimentosistemiartificiali"}/>
-				</Router>
-				<Copyright/>
+				<LatexRenderColor.Provider value={"White"}>
+					<h1><a href="/">Appuntiweb</a> <small>di <a href="https://steffo.eu/">Steffo</a></small></h1>
+					<Router history={createHashHistory()}>
+						<Home path="/"/>
+						<Fisica path="/fisica"/>
+						<VlDiGeometria path="/vldigeometria"/>
+						<MingwInstall path="/mingwinstall"/>
+						<Statistica path="/statistica"/>
+						<OttimizzazioneLineare path="/ottimizzazionelineare"/>
+						<BasiDiDati path="/basididati"/>
+						<CalcoloNumerico path="/calcolonumerico"/>
+						<ApprendimentoSistemiArtificiali path={"/apprendimentosistemiartificiali"}/>
+					</Router>
+					<Copyright/>
+				</LatexRenderColor.Provider>
 			</div>
 		);
 	}

src/routes/ottimizzazioneLineare.js

@@ -193,6 +193,11 @@ export default class OttimizzazioneLineare extends Component {
                             <li>Il <b>termine noto</b> della funzione obiettivo è il tuo risultato.</li>
                         </ol>
                     </Panel>
+                    <Panel title={"Sotto forma di tableau"}>
+                        <p>
+                            Se il problema è rappresentato in forma di tableau, allora esso è risolvibile applicando l'algoritmo di Gauss-Jordan, in aggiunta tenendo conto delle regole per la selezione delle variabili entranti e uscenti.
+                        </p>
+                    </Panel>
                     <Panel title={"Criteri per la variabile entrante"}>
                         <ul>
                             <li>Coefficiente maggiore nella funzione obiettivo.</li>