{"id":67952,"date":"2026-10-26T18:02:35","date_gmt":"2026-10-26T12:32:35","guid":{"rendered":"https:\/\/www.quickonlinetips.com\/archives\/?page_id=67952"},"modified":"2026-10-30T11:06:32","modified_gmt":"2026-10-30T05:36:32","slug":"quick-code-styler-wordpress-plugin","status":"publish","type":"page","link":"https:\/\/www.quickonlinetips.com\/archives\/quick-code-styler-wordpress-plugin\/","title":{"rendered":"Quick Code Styler WordPress Plugin"},"content":{"rendered":"\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1544\" height=\"500\" src=\"https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/quick-code-styler-banner.png\" alt=\"Quick Code Styler WordPress plugin\" class=\"wp-image-67940\" srcset=\"https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/quick-code-styler-banner.png 1544w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/quick-code-styler-banner-300x97.png 300w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/quick-code-styler-banner-1024x332.png 1024w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/quick-code-styler-banner-150x49.png 150w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/quick-code-styler-banner-768x249.png 768w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/quick-code-styler-banner-1536x497.png 1536w\" sizes=\"(max-width: 1544px) 100vw, 1544px\" \/><\/figure>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Quick Code Styler makes the code in your posts easy to read and easy to copy. Every code block gets a clean code window, syntax colours and a Copy button, in new posts and old ones. It is based on the code style we use here on Quick Online Tips.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/github.com\/quickonlinetips\/quickonlinetips\/tree\/main\/plugins\/quick-code-styler\" rel=\"noopener\"><svg aria-hidden=\"true\" width=\"18\" height=\"18\" viewBox=\"0 0 16 16\" fill=\"currentColor\" style=\"vertical-align:-3px;margin-right:8px\"><path d=\"M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z\"\/><\/svg>View the code on GitHub &rarr;<\/a><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group has-background\" style=\"border-left-color:#1a7f64;border-left-width:4px;background-color:#f1f8f5;padding-top:16px;padding-right:20px;padding-bottom:16px;padding-left:20px\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-container-core-group-is-layout-774b32ee wp-block-group-is-layout-constrained\">\n<p class=\"wp-block-paragraph\"><strong>Coming soon to WordPress.org.<\/strong> Quick Code Styler is a new plugin and is being submitted to the WordPress.org plugin directory. Until then, you can get it from GitHub.<\/p>\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">What you get<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>A clean code window<\/strong> with a header bar, rounded corners and comfortable spacing<\/li>\n\n\n<li><strong>Syntax colours<\/strong> for comments, quoted text, HTML tags, attributes, keywords and numbers, good for HTML, CSS, JavaScript, PHP, Python and shell commands<\/li>\n\n\n<li><strong>A Copy button<\/strong> on every code block<\/li>\n\n\n<li><strong>Three looks:<\/strong> Dark, Light, or Automatic, which follows each visitor&#8217;s light or dark mode<\/li>\n\n\n<li><strong>Your own colours<\/strong> with the WordPress colour picker and a live preview<\/li>\n\n\n<li><strong>Mobile friendly:<\/strong> long lines wrap on phones, or scroll sideways like a code editor<\/li>\n\n\n<li><strong>Inline code and keyboard keys:<\/strong> <code>file_name.php<\/code> gets a neat highlight and <kbd>Ctrl<\/kbd> + <kbd>C<\/kbd> looks like real keys<\/li>\n\n\n<li><strong>Clean post summaries:<\/strong> code is left out of short summaries on home pages and archives<\/li>\n\n\n<li><strong>Readable by everyone:<\/strong> the built-in colours meet the WCAG AA contrast level<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1200\" height=\"908\" src=\"https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/quick-code-styler-dark.png\" alt=\"A code block with syntax colours and a Copy button in the dark look\" class=\"wp-image-67947\" srcset=\"https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/quick-code-styler-dark.png 1200w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/quick-code-styler-dark-300x227.png 300w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/quick-code-styler-dark-1024x775.png 1024w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/quick-code-styler-dark-150x114.png 150w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/quick-code-styler-dark-768x581.png 768w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/><figcaption class=\"wp-element-caption\">A code block in the Dark look, with syntax colours and the Copy button.<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1200\" height=\"908\" src=\"https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/quick-code-styler-light.png\" alt=\"The same code block in the Light look\" class=\"wp-image-68265\" srcset=\"https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/quick-code-styler-light.png 1200w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/quick-code-styler-light-300x227.png 300w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/quick-code-styler-light-1024x775.png 1024w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/quick-code-styler-light-150x114.png 150w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/quick-code-styler-light-768x581.png 768w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/><figcaption class=\"wp-element-caption\">The same post in the Light look.<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Light and fast<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>One small stylesheet and one tiny script, with no outside library<\/li>\n\n\n<li>Loads only on pages that show code. Other pages get nothing extra<\/li>\n\n\n<li>Turn off the colours and the Copy button and it loads no JavaScript at all<\/li>\n\n\n<li>Works with the standard WordPress Code block and classic <code>&lt;pre&gt;<\/code> code, so nothing breaks if you ever switch it off<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"780\" height=\"828\" src=\"https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/quick-code-styler-mobile.png\" alt=\"Quick Code Styler code block on a phone with long lines wrapped\" class=\"wp-image-68267\" srcset=\"https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/quick-code-styler-mobile.png 780w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/quick-code-styler-mobile-283x300.png 283w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/quick-code-styler-mobile-141x150.png 141w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/quick-code-styler-mobile-768x815.png 768w\" sizes=\"(max-width: 780px) 100vw, 780px\" \/><figcaption class=\"wp-element-caption\">On a phone, long lines wrap so there is no sideways scrolling.<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Change the look and colours<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Go to Settings &gt; Quick Code Styler, choose Dark, Light or Automatic, and pick your own colours. A live preview shows the result before you save, and a Default link under each colour undoes a change.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1400\" height=\"1300\" src=\"https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/quick-code-styler-settings.png\" alt=\"Quick Code Styler settings page with a live preview\" class=\"wp-image-67948\" srcset=\"https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/quick-code-styler-settings.png 1400w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/quick-code-styler-settings-300x279.png 300w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/quick-code-styler-settings-1024x951.png 1024w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/quick-code-styler-settings-150x139.png 150w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/quick-code-styler-settings-768x713.png 768w\" sizes=\"(max-width: 1400px) 100vw, 1400px\" \/><figcaption class=\"wp-element-caption\">Choose Dark, Light or Automatic, pick your colours and preview the result.<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">How to install<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Download the <code>quick-code-styler<\/code> folder from GitHub and upload it to <code>\/wp-content\/plugins\/<\/code>. Or put the folder in a zip file and use Plugins &gt; Add New &gt; Upload Plugin.<\/li>\n\n\n<li>Activate it on the Plugins screen.<\/li>\n\n\n<li>Open any post that has code to see the new look. To change the look or colours, go to Settings &gt; Quick Code Styler.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Questions<\/h2>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>How is this different from a full syntax highlighter?<\/summary>\n<p class=\"wp-block-paragraph\">Full highlighters understand hundreds of languages in detail, but load much larger files. Quick Code Styler is made for blogs, tutorials and how-to guides, where code is usually short. It gives you most of the look for a fraction of the weight.<\/p>\n<\/details>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>Do I need a special block?<\/summary>\n<p class=\"wp-block-paragraph\">No. It styles the standard WordPress Code block and classic <code>&lt;pre&gt;<\/code> code you already have.<\/p>\n<\/details>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>Which languages are coloured?<\/summary>\n<p class=\"wp-block-paragraph\">The colouring is simple and general, so it suits most short code you would show in a blog post: HTML, CSS, JavaScript, PHP, Python, shell commands and similar. You do not need to pick a language.<\/p>\n<\/details>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>How do I show a keyboard key?<\/summary>\n<p class=\"wp-block-paragraph\">Wrap the key in kbd tags, for example <code>&lt;kbd&gt;Ctrl&lt;\/kbd&gt;<\/code>. In the block editor, use Edit as HTML on the paragraph.<\/p>\n<\/details>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>What does Automatic do?<\/summary>\n<p class=\"wp-block-paragraph\">It shows the light code window to visitors who use light mode on their phone or computer, and the dark one to visitors who use dark mode.<\/p>\n<\/details>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>Can I turn off the JavaScript?<\/summary>\n<p class=\"wp-block-paragraph\">Yes. Turn off both Syntax colours and Copy button in the settings, and the plugin loads only its stylesheet.<\/p>\n<\/details>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>My page builder&#8217;s code is not styled.<\/summary>\n<p class=\"wp-block-paragraph\">The plugin looks for code in the post content. If your builder stores content elsewhere, add this to your theme&#8217;s functions.php to load the styles on every page:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>add_filter( 'quick_code_styler_load', '__return_true' );<\/code><\/pre>\n<\/details>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>Does it slow my site down?<\/summary>\n<p class=\"wp-block-paragraph\">No. It adds one small stylesheet and one tiny script, only on pages that show code.<\/p>\n<\/details>\n\n\n\n<h2 class=\"wp-block-heading\"><a href=\"https:\/\/www.quickonlinetips.com\/archives\/wordpress-plugins\/\">More WordPress Plugins<\/a><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.quickonlinetips.com\/archives\/quick-meta-keywords-wordpress-plugin\/\">Quick META Keywords WordPress Plugin<\/a> &#8211; Adds a tidy META keywords tag to every post, made from its categories and tags, with a settings page and live preview.<\/li>\n\n\n<li><a href=\"https:\/\/www.quickonlinetips.com\/archives\/display-wordpress-version-plugin\/\">Quick WordPress Version Plugin<\/a> &#8211; Adds a simple &#8220;Powered by WordPress&#8221; line to your site, with or without the version number, and shows your installed and latest version.<\/li>\n\n\n<li><a href=\"https:\/\/www.quickonlinetips.com\/archives\/simple-feed-copyright-wordpress-plugin\/\">Quick Feed Copyright WordPress Plugin<\/a> &#8211; Adds a copyright notice and a link to the original article at the end of every post in your RSS feed.<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\" style=\"margin-top:36px\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/www.quickonlinetips.com\/archives\/tools\/\">See Our Free Online Tools &rarr;<\/a><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Quick Code Styler makes the code in your posts easy to read and easy to copy. Every code block gets a clean code window, syntax colours and a Copy button, in new posts and old ones. It is based on the code style we use here on Quick Online Tips. Coming soon to WordPress.org. Quick&#8230;<\/p>\n","protected":false},"author":7,"featured_media":67940,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"class_list":["post-67952","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/pages\/67952","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/comments?post=67952"}],"version-history":[{"count":3,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/pages\/67952\/revisions"}],"predecessor-version":[{"id":68774,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/pages\/67952\/revisions\/68774"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/media\/67940"}],"wp:attachment":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/media?parent=67952"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}