{"id":216,"date":"2021-11-28T00:44:02","date_gmt":"2021-11-28T00:44:02","guid":{"rendered":"https:\/\/writingagame.com\/?p=216"},"modified":"2023-06-06T21:23:57","modified_gmt":"2023-06-06T21:23:57","slug":"fix-3-code-samples-plugins","status":"publish","type":"post","link":"https:\/\/writingagame.com\/index.php\/2021\/11\/28\/fix-3-code-samples-plugins\/","title":{"rendered":"WordPress fix 3. Code samples, plugins"},"content":{"rendered":"\n<p>Since this website is basically a technical blog, it has a bunch of code samples, that looked by default like this (simply pink font):<\/p>\n\n\n\n<p><img decoding=\"async\" src=\"https:\/\/writingagame.com\/img\/b02\/c03\/01.jpg\"><\/p>\n\n\n\n<p>I hoped to find a CSS style\/class with a firm intension to customize it to the ground (not only font color), but again, turned out that professionals do it differently.<\/p>\n\n\n\n<p><strong>Professional advice from Artem Demin:<\/strong><br>For such purposes people usually use plugins. There is a huge choice available in<\/p>\n\n\n\n<p><em>Dashboard -&gt; Plugins -&gt; Add New<\/em><\/p>\n\n\n\n<p>In my case the best fit option was \u201cSyntaxHighlighter Evolved\u201d.<\/p>\n\n\n\n<p>Install. Activate.<\/p>\n\n\n\n<p>Now my Block Editor has an extra option. Not only \u201c&lt;&gt; Code\u201d, but also \u201c&lt;&gt; SyntaxHighlighter Code\u201d.<\/p>\n\n\n\n<p>Result:<\/p>\n\n\n\n<p><img decoding=\"async\" src=\"https:\/\/writingagame.com\/img\/b02\/c03\/02.jpg\"><\/p>\n\n\n\n<p>Only 1 problem &#8211; it&#8217;s not scrollable. <\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<ul class=\"wp-block-list\">\n<li>ONLY <strong>IF<\/strong> it irritates you too, then here is a cure:<\/li>\n<\/ul>\n\n\n\n<p><strong>a<\/strong>: we need to modify <strong>their <\/strong>CSS on your server (Additional CSS won&#8217;t work for it). File:<\/p>\n\n\n\n<p><em>..\/public_html\/wp-content\/plugins\/syntaxhighlighter\/syntaxhighlighter3\/styles\/shCore.css<\/em><\/p>\n\n\n\n<p>Find style <em>.syntaxhighlighter<\/em><\/p>\n\n\n\n<p>Replace <strong>overflow <\/strong>settings to <em>overflow: visible !important;<\/em><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>In case of plugin update in the future, you will need to do it again&#8230;<\/li>\n\n\n\n<li>or you can change version in <em>..<em>\/public_html\/wp-content\/plugins\/syntaxhighlighter\/<\/em>syntaxhighlighter.<\/em><strong><em>php<\/em> <\/strong>file to let&#8217;s say <strong>33<\/strong>.6.0<\/li>\n<\/ul>\n\n\n\n<p><strong>b<\/strong>: Go to&nbsp;<em>Dashboard -&gt; Appearance -&gt; Customize -&gt; Additional CSS<\/em><\/p>\n\n\n\n<p>and add<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\n\/*scroll*\/\n.wp-block-syntaxhighlighter-code{\n\tborder: 1px solid silver;\n\tmax-height:400px;\n\toverflow:auto!important;\n}\n<\/pre><\/div>\n\n\n<p><strong>Publish<\/strong>.<\/p>\n\n\n\n<p>Result:<\/p>\n\n\n\n<p><img decoding=\"async\" src=\"https:\/\/writingagame.com\/img\/b02\/c03\/03.jpg\"><\/p>\n\n\n\n<p>However, it&#8217;s not enough.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<p>2. To prevent it from &#8220;decoding&#8221; special symbols (which is a common case in code samples), we need to add an extra function in <em>Dashboard -&gt; Appearance -&gt; <strong>Theme <\/strong>Editor<\/em>:<\/p>\n\n\n\n<p>Open <strong>Theme Functions<\/strong> on the right.<\/p>\n\n\n\n<p>Add following code to the very end of the file:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: php; title: ; notranslate\" title=\"\">\nfunction kagg_syntaxhighlighter_precode( $code, $atts, $tag ) {\nif ( &#039;code&#039; === $tag ) {\n$code = wp_specialchars_decode( $code );\n}\nreturn $code;\n}\nadd_filter( &#039;syntaxhighlighter_precode&#039;, &#039;kagg_syntaxhighlighter_precode&#039;, 10, 3 );\nadd_filter( &#039;run_wptexturize&#039;, &#039;__return_false&#039; );\n\n<\/pre><\/div>\n\n\n<p>And then &#8211; <strong>Update File<\/strong><\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<p>3. Another useful plugin I installed &#8211; <strong>Antispam Bee<\/strong> &#8211; free and effective.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p class=\"mb-2\">Since this website is basically a technical blog, it has a bunch of code samples, that looked by default like this (simply pink font): I hoped to find a CSS style\/class with a firm intension to customize it to the ground (not only font color), but again, turned out that professionals do it differently. Professional [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"class_list":["post-216","post","type-post","status-publish","format-standard","hentry","category-wordpress"],"_links":{"self":[{"href":"https:\/\/writingagame.com\/index.php\/wp-json\/wp\/v2\/posts\/216","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/writingagame.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/writingagame.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/writingagame.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/writingagame.com\/index.php\/wp-json\/wp\/v2\/comments?post=216"}],"version-history":[{"count":20,"href":"https:\/\/writingagame.com\/index.php\/wp-json\/wp\/v2\/posts\/216\/revisions"}],"predecessor-version":[{"id":2130,"href":"https:\/\/writingagame.com\/index.php\/wp-json\/wp\/v2\/posts\/216\/revisions\/2130"}],"wp:attachment":[{"href":"https:\/\/writingagame.com\/index.php\/wp-json\/wp\/v2\/media?parent=216"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/writingagame.com\/index.php\/wp-json\/wp\/v2\/categories?post=216"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/writingagame.com\/index.php\/wp-json\/wp\/v2\/tags?post=216"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}