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

Question

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?

Answer 1

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