I’ve always admired the code blocks on CSDN for their language-specific highlighting and beautiful rendering. This made me wonder if I could achieve a similar effect on WordPress. Here, I’ll detail my process of setting up code rendering in WordPress.
Just to clarify, the CSDN code highlighting module isn’t due to the editor; I initially thought it was a Markdown editor issue! It’s actually powered by Prism (I only found this out after inspecting CSDN’s article source code). Prism is a lightweight code highlighting module that makes it easy to highlight code in articles and supports most common programming languages. Without further ado, let’s dive into how to use Prism for code highlighting in WordPress.
1. Install the Prismatic Plugin
Installing plugins in WordPress is straightforward. Simply go to your WordPress admin dashboard, navigate to the “Plugins” section, click “Add New,” and search for “Prismatic.” (This is the one I used; you might explore others, but their implementation might differ.) Download and activate it.
This was actually the trickiest part for me initially, as I had no idea how to use it. To enable code highlighting, when you’re writing a blog post and need to add code, insert a Custom HTML block. Inside this block, add the following code:
<pre><code class="language-python">
2. Adding Your Code
ou can change python to the name of any programming language you’re using. Then, simply paste your code within this block. Here’s a detailed example: if I want to highlight a bash command like yum update -y, I would first:
- Add a block, and choose Custom HTML.
- Then, write the code as shown below:
After clicking “Publish,” you’ll see the code highlighted like this:
yum update -y
While this achieves code highlighting in WordPress, it still looks slightly different from CSDN’s, though I’m quite satisfied with the result. The difference is likely due to CSS styling; I’ll update this guide if I adopt the same CSS styles later. Again, I want to emphasize that code highlighting has nothing to do with the editor type.
