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 {
+export default function(props) {
-	render() {
+	let renderColor = useContext(LatexRenderColor);
-		let equation = `{\\color{White} ${this.props.children} }`;
+
+	// 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={this.props.children}
+			 alt={props.children}
-			     title={this.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,12 +22,14 @@ 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">
+				<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="/"/>
@@ -41,6 +43,7 @@ export default class App extends Component {
 						<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>