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

admin2025-06-04  3

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 badges
Add a comment  | 

1 Answer 1

Reset to default 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/google/code-prettify

转载请注明原文地址:http://conceptsofalgorithm.com/Algorithm/1748977926a315328.html

最新回复(0)