{"id":3624,"date":"2022-09-17T11:20:55","date_gmt":"2022-09-17T02:20:55","guid":{"rendered":"https:\/\/programresource.net\/?p=3624"},"modified":"2022-09-17T11:20:56","modified_gmt":"2022-09-17T02:20:56","slug":"wordpress-syntaxhighlighter-extends-outside-area","status":"publish","type":"post","link":"https:\/\/programresource.net\/en\/2022\/09\/17\/3624.html","title":{"rendered":"WordPress \/ syntaxhighlighter extends outside area"},"content":{"rendered":"\n<p>I&#8217;m using SyntaxHighlighter for formatting code.<\/p>\n\n\n\n<p>However, updating wordpress \/ plugin or modifying css sometime results in undesired way. Below shows syntaxhighlighter extend outside the area.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/programresource.net\/images\/2022\/09\/image-18.png\"><img decoding=\"async\" src=\"https:\/\/programresource.net\/images\/2022\/09\/image-18.png\" alt=\"\" class=\"wp-image-3616\" srcset=\"https:\/\/programresource.net\/images\/2022\/09\/image-18.png 744w, https:\/\/programresource.net\/images\/2022\/09\/image-18-300x64.png 300w\" sizes=\"(max-width: 744px) 100vw, 744px\" \/><\/a><\/figure>\n\n\n\n<p>I can directly edit .syntaxhighlighter in shCore.css and modify width to fix the issue, but it may get overwritten when updating the plugin.<\/p>\n\n\n\n<p>I&#8217;m not familiar with internal process of wordpress, so it may not be best way to solve the problem, but below workaround worked.<\/p>\n\n\n\n<p>Select style.css in theme file editor and add below css to end of the file.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\nbody .syntaxhighlighter {\n\twidth: auto !important;\n}\n<\/pre><\/div>\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/programresource.net\/images\/2022\/09\/image-19.png\"><img decoding=\"async\" src=\"https:\/\/programresource.net\/images\/2022\/09\/image-19.png\" alt=\"\" class=\"wp-image-3618\" srcset=\"https:\/\/programresource.net\/images\/2022\/09\/image-19.png 704w, https:\/\/programresource.net\/images\/2022\/09\/image-19-300x168.png 300w\" sizes=\"(max-width: 704px) 100vw, 704px\" \/><\/a><\/figure>\n\n\n\n<p>Now width is fixed.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/programresource.net\/images\/2022\/09\/image-20.png\"><img decoding=\"async\" src=\"https:\/\/programresource.net\/images\/2022\/09\/image-20.png\" alt=\"\" class=\"wp-image-3620\" srcset=\"https:\/\/programresource.net\/images\/2022\/09\/image-20.png 713w, https:\/\/programresource.net\/images\/2022\/09\/image-20-300x56.png 300w\" sizes=\"(max-width: 713px) 100vw, 713px\" \/><\/a><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<blockquote class=\"wp-block-quote\"><p><a href=\"https:\/\/stackoverflow.com\/questions\/10734999\/how-to-override-css-of-a-plugin-in-wordpress-from-styles-css\">https:\/\/stackoverflow.com\/questions\/10734999\/how-to-override-css-of-a-plugin-in-wordpress-from-styles-css<\/a><\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"<p>I&#8217;m using SyntaxHighlighter for formatting code. However, updating wordpress \/ plugin or modifying css sometime results in undesired way. Below shows syntaxhighlighter extend outside the area. I can directly edit .syntaxhighlighter in shCore.css and modify width to fix the issue, but it may get overwritten when updating the plugin. I&#8217;m not familiar with internal process of wordpress, so it may not be best way to solve the problem, but below workaround worked. Select style.css in theme file editor and add below css to end of the file. Now width is fixed. https:\/\/stackoverflow.com\/questions\/10734999\/how-to-override-css-of-a-plugin-in-wordpress-from-styles-css<\/p>\n","protected":false},"author":2,"featured_media":3619,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"ngg_post_thumbnail":0,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false}}},"categories":[192],"tags":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/programresource.net\/images\/2022\/09\/image-19.png","jetpack_shortlink":"https:\/\/wp.me\/p3pJyQ-Ws","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/programresource.net\/en\/wp-json\/wp\/v2\/posts\/3624"}],"collection":[{"href":"https:\/\/programresource.net\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/programresource.net\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/programresource.net\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/programresource.net\/en\/wp-json\/wp\/v2\/comments?post=3624"}],"version-history":[{"count":1,"href":"https:\/\/programresource.net\/en\/wp-json\/wp\/v2\/posts\/3624\/revisions"}],"predecessor-version":[{"id":3625,"href":"https:\/\/programresource.net\/en\/wp-json\/wp\/v2\/posts\/3624\/revisions\/3625"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/programresource.net\/en\/wp-json\/wp\/v2\/media\/3619"}],"wp:attachment":[{"href":"https:\/\/programresource.net\/en\/wp-json\/wp\/v2\/media?parent=3624"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/programresource.net\/en\/wp-json\/wp\/v2\/categories?post=3624"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/programresource.net\/en\/wp-json\/wp\/v2\/tags?post=3624"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}