How to Add Beautiful Syntax Highlighting with Copy and Edit Button in Website

    By
    Lukman
    -
    0
    3

    Displaying code snippets properly is essential for any website focused on programming, tutorials, or software documentation. However, WordPress by default does not offer built-in syntax highlighting or a copy-to-clipboard feature for code blocks. This can significantly affect the readability and usability of your content, especially for readers who want to quickly copy and test your code.

    In this article, we will walk through a simple and effective way to add syntax highlighting and a copy button to your code blocks in WordPress using Prism.js, a lightweight and widely-used JavaScript library.

    Why Use Prism.js?

    Prism.js is a fast, lightweight, and customizable syntax highlighter. It supports a wide range of programming languages and offers a variety of plugins to enhance functionality, such as line numbers, code folding, and a toolbar with copy buttons.

    Key advantages of Prism.js:

    • Minimal file size and fast loading
    • Supports dozens of programming languages
    • Easy to customize with CSS
    • Plugins for copy-to-clipboard, toolbar, and line numbers

    Implementation Steps

    1. Include Prism.js Styles and Scripts

    To get started, you need to include the Prism.js core CSS and JavaScript files in your WordPress theme. The best place to do this is in your theme’s header.php and footer.php files, or by enqueueing them properly via functions.php.

    For simplicity, you can add the following links to your <head> section:

    
<!-- Prism.js core theme -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css" rel="stylesheet" />

<!-- Optional toolbar styling -->
<style>
.code-toolbar {
  position: relative;
}
.code-toolbar .toolbar {
  position: absolute;
  top: 0.5em;
  right: 0.5em;
}
.toolbar-item {
  background: #eee;
  border: 1px solid #ccc;
  padding: 0.25em 0.5em;
  font-size: 12px;
  border-radius: 4px;
  cursor: pointer;
}
</style>

    2. Add JavaScript Before the Closing </body> Tag

    Next, you need to include the JavaScript files at the bottom of your page, preferably just before the </body> tag:

    
<!-- Prism.js core script -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>

<!-- Prism.js toolbar plugin -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/toolbar/prism-toolbar.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/toolbar/prism-toolbar.min.css" rel="stylesheet" />

<!-- Copy to clipboard plugin -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script>

    3. Format Your Code Snippets Properly

    Now that Prism.js is loaded, you can start writing code blocks in your posts or pages. Make sure to switch your WordPress editor to Code view (HTML view) and wrap your code using the following structure:

    
<pre class="language-javascript"><code class="language-javascript">
function greet() {
  console.log("Hello, world!");
}
</code></pre>

    You can replace language-javascript with other supported languages such as language-html, language-css, language-python, etc.

    4. Enable Optional Editable Code Blocks

    If you want to make code editable within the browser (for demo purposes or interactive learning), you can add the contenteditable="true" attribute. However, please note that syntax highlighting may not work properly on dynamic or editable content unless handled specifically.

    
<pre><code contenteditable="true">console.log("Editable code block");</code></pre>

    Best Practices

    • Always test your code display on both desktop and mobile for readability.
    • Do not use aggressive JavaScript optimization or minification tools that may interfere with Prism’s loading.
    • For WordPress users using page builders or Gutenberg, use custom HTML blocks for clean integration.

    Example Output

    This will appear with syntax highlighting and a copy button in the top right corner of the block for quick copying.

    Conclusion

    Integrating Prism.js into your WordPress website is a simple yet powerful way to enhance code readability and improve user experience. With syntax highlighting and a built-in copy button, your technical articles and tutorials will appear more professional and be more helpful to your readers.

    If you found this guide useful, consider sharing it with others or leaving a comment below. Your feedback is appreciated!