I made a wordpress website for online education. I have wrote latex code to draw a circuit. Now my question is how do I put this circuit into my website?
I know one option that is to take a screenshot of the circuit and upload the image in your website. But is there any other sophisticated solution?
I made a wordpress website for online education. I have wrote latex code to draw a circuit. Now my question is how do I put this circuit into my website?
I know one option that is to take a screenshot of the circuit and upload the image in your website. But is there any other sophisticated solution?
Share Improve this question asked Jan 24, 2019 at 13:32 Self-Made ManSelf-Made Man 1134 bronze badges1 Answer
Reset to default 1You can use the a combination of <pre> and <code> tags to insert your latex code (or any code) directly into the editor.
The <pre> tag will keep your line breaks and the <code> tag will tell the browser to display the code and not render it as html.
Here is an example.
<pre>
<code>
\documentclass{article}
\usepackage{tikz}
\usepackage{circuitikz}
\begin{document}
\begin{figure}[h!]
\begin{center}
\begin{circuitikz}
\draw (0,0)
to[V,v=$U_q$] (0,2) % The voltage source
to[short] (2,2)
to[R=$R_1$] (2,0) % The resistor
to[short] (0,0);
\end{circuitikz}
\caption{My first circuit.}
\end{center}
\end{figure}
\end{document}
</code>
</pre>
You can put this directly in the editor's HTML block if you are using WP 5+. Your theme may or may not have specific styles for code but you could add CSS to style those tags if needed.
You can also use 3rd party "syntax highlighting" tools that come pre-packaged with styles for displaying code on the web. For example, https://github/google/code-prettify