How do I put a latex drawn circuit in my wordpress website?

Question

You 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.com/google/code-prettify

Related Posts: