{"id":41773,"date":"2024-11-30T20:35:10","date_gmt":"2024-11-30T18:35:10","guid":{"rendered":"https:\/\/coma.lv\/2024\/11\/30\/how-to-easily-display-code-on-your-site\/"},"modified":"2024-11-30T20:35:10","modified_gmt":"2024-11-30T18:35:10","slug":"how-to-easily-display-code-on-your-site","status":"publish","type":"post","link":"https:\/\/coma.lv\/en\/2024\/11\/30\/how-to-easily-display-code-on-your-site\/","title":{"rendered":"How to Easily Display Code on Your Site"},"content":{"rendered":"\n<p style=\"text-align: left;\">Do you have a development blog and would like to post code snippets on it? By default, displaying code on a WordPress site is not an easy task, because for security reasons WordPress filters block any code added to posts, widgets or comments. So you need to install and activate the Syntax Highlighter Evolved plugin. After activating it, go to the Settings \u00bb Syntax Highlighter page to configure the plugin you have just installed.<\/p>\n<p style=\"text-align: left;\"><img decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/coma.lv\/wp-content\/uploads\/2016\/11\/syntaxhilightersettings.jpg\" alt=\"WordPress\" title=\"\"><\/p>\n<p style=\"text-align: left;\">The default settings should suit any site, but in any case you should review them carefully and make changes if needed. Every setting has a detailed description of what it does. The plugin uses simple shortcodes to display code. For each language you need to wrap the code in the corresponding shortcode. For example, in the case of PHP you will need to wrap the code like this:<\/p>\n<p style=\"text-align: left;\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-34554 size-full\" src=\"https:\/\/coma.lv\/wp-content\/uploads\/2025\/02\/Ekranuznemums-2025-02-20-202816.jpg\" alt=\"WordPress\" width=\"1200\" height=\"309\" title=\"\" srcset=\"https:\/\/coma.lv\/wp-content\/uploads\/2025\/02\/Ekranuznemums-2025-02-20-202816.jpg 1200w, https:\/\/coma.lv\/wp-content\/uploads\/2025\/02\/Ekranuznemums-2025-02-20-202816-300x77.jpg 300w, https:\/\/coma.lv\/wp-content\/uploads\/2025\/02\/Ekranuznemums-2025-02-20-202816-1030x265.jpg 1030w, https:\/\/coma.lv\/wp-content\/uploads\/2025\/02\/Ekranuznemums-2025-02-20-202816-768x198.jpg 768w, https:\/\/coma.lv\/wp-content\/uploads\/2025\/02\/Ekranuznemums-2025-02-20-202816-705x182.jpg 705w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/p>\n<p style=\"text-align: left;\">[<\/p>\n<pre class=\"brush: php; title: ; notranslate\" title=\"\">\r\n&amp;lt;?php\r\necho \u201cHello World\u201d;\r\n?&amp;gt;\r\n<\/pre>\n<p style=\"text-align: left;\">]<\/p>\n<p style=\"text-align: left;\">For CSS:<\/p>\n<p style=\"text-align: left;\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-34557 size-full\" src=\"https:\/\/coma.lv\/wp-content\/uploads\/2025\/02\/Ekranuznemums-2025-02-20-202925.jpg\" alt=\"WordPress\" width=\"1200\" height=\"371\" title=\"\" srcset=\"https:\/\/coma.lv\/wp-content\/uploads\/2025\/02\/Ekranuznemums-2025-02-20-202925.jpg 1200w, https:\/\/coma.lv\/wp-content\/uploads\/2025\/02\/Ekranuznemums-2025-02-20-202925-300x93.jpg 300w, https:\/\/coma.lv\/wp-content\/uploads\/2025\/02\/Ekranuznemums-2025-02-20-202925-1030x318.jpg 1030w, https:\/\/coma.lv\/wp-content\/uploads\/2025\/02\/Ekranuznemums-2025-02-20-202925-768x237.jpg 768w, https:\/\/coma.lv\/wp-content\/uploads\/2025\/02\/Ekranuznemums-2025-02-20-202925-705x218.jpg 705w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/p>\n<p style=\"text-align: left;\">[<\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\r\n.entry-title {\r\nfont-family:\u201dOpen Sans\u201d, arial, sans-serif;\r\nfont-size:16px;\r\ncolor:#272727;\r\n}\r\n<\/pre>\n<p style=\"text-align: left;\">]<\/p>\n<p style=\"text-align: left;\">The plugin will highlight your code and add line numbers and indentation so that your readers can easily copy and paste code snippets from your site.<\/p>\n<h2 style=\"text-align: left;\">How to Display Code in WordPress Without Using Plugins<\/h2>\n<p style=\"text-align: left;\">Many users run blogs unrelated to development, so they do not need to insert code snippets into their posts often. For rare cases you can add code by converting it to HTML in a similar way:<\/p>\n<p style=\"text-align: left;\">&amp;gt;?php echo &#8220;Hello World&#8221;; ?&amp;lt;<\/p>\n<p style=\"text-align: left;\">The problem with this method is that it is hard to do manually, so you will need to use specialized online services. After converting the code to HTML, you can insert it into posts. For additional styling you can wrap the code in &lt;code&gt; and &lt;\/code&gt; tags.<\/p>\n<hr \/>\n<p style=\"text-align: left;\"><em>Our specialization is WordPress website development and maintenance. Contact us for a free consultation \u2014 <a href=\"mailto:vadim@coma.lv\">vadim@coma.lv<\/a>, <a href=\"tel:+37129394520\">+371 29394520<\/a><\/em><\/p>\n<hr \/>\n","protected":false},"excerpt":{"rendered":"<p>Do you have a development blog and would like to post code snippets on it? By default, displaying code on a WordPress site is not an easy task, because for security reasons WordPress filters block any code added to posts, widgets or comments. So you need to install and activate the Syntax Highlighter Evolved plugin. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":38162,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1225,1406,1407],"tags":[],"class_list":["post-41773","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress","category-for-beginners","category-tutorials"],"_links":{"self":[{"href":"https:\/\/coma.lv\/en\/wp-json\/wp\/v2\/posts\/41773","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coma.lv\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/coma.lv\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/coma.lv\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/coma.lv\/en\/wp-json\/wp\/v2\/comments?post=41773"}],"version-history":[{"count":0,"href":"https:\/\/coma.lv\/en\/wp-json\/wp\/v2\/posts\/41773\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/coma.lv\/en\/wp-json\/wp\/v2\/media\/38162"}],"wp:attachment":[{"href":"https:\/\/coma.lv\/en\/wp-json\/wp\/v2\/media?parent=41773"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coma.lv\/en\/wp-json\/wp\/v2\/categories?post=41773"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coma.lv\/en\/wp-json\/wp\/v2\/tags?post=41773"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}