{"id":852,"date":"2017-11-05T22:27:05","date_gmt":"2017-11-06T03:27:05","guid":{"rendered":"https:\/\/blog.index.pe\/?p=852"},"modified":"2022-02-14T01:59:35","modified_gmt":"2022-02-14T06:59:35","slug":"como-anadir-codigo-en-tus-post-wordpress","status":"publish","type":"post","link":"https:\/\/blog.index.pe\/en\/como-anadir-codigo-en-tus-post-wordpress\/","title":{"rendered":"How to Add Code in your WordPress Post"},"content":{"rendered":"<p><script async=\"\" src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script><br \/>\n<!-- Whois responsive --><br \/>\n<ins class=\"adsbygoogle\" style=\"display: block;\" data-ad-client=\"ca-pub-7016851332009441\" data-ad-slot=\"3357279107\" data-ad-format=\"auto\"><\/ins><br \/>\n<script><br \/>\n(adsbygoogle = window.adsbygoogle || []).push({});<br \/>\n<\/script><br \/>\nSurely you tried several times to\u00a0<strong>include code in your WordPress posts<\/strong>\u00a0without success, here we have the definitive solution, very simple and without errors, so as not to die trying.<\/p>\n<p>To achieve this we are going to help the plugin\u00a0<a href=\"https:\/\/es.wordpress.org\/plugins\/my-syntax-highlighter\/\" target=\"_blank\" rel=\"noopener\"><strong>My Syntax Highlighter<\/strong><\/a>\u00a0which will allow us to insert\u00a0<strong>all kinds of codes<\/strong>\u00a0in our inputs but without them being executed; instead they will be displayed in a very visually appealing way, within a code box and with the option to display the \u201c<em>plane text<\/em>\u201d in case our reader wants to copy the original code.<\/p>\n<h3>Installing it is very easy...<\/h3>\n<ol>\n<li><strong>Search, install and activate the plugin:<\/strong><br \/>\n<a href=\"https:\/\/blog.index.pe\/wp-content\/uploads\/2017\/11\/codigo-post.png\" rel=\"lightbox-0\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-853 size-large alignnone\" src=\"https:\/\/blog.index.pe\/wp-content\/uploads\/2017\/11\/codigo-post-1024x516.png\" alt=\"\" width=\"680\" height=\"343\" srcset=\"https:\/\/blog.index.pe\/wp-content\/uploads\/2017\/11\/codigo-post-1024x516.png 1024w, https:\/\/blog.index.pe\/wp-content\/uploads\/2017\/11\/codigo-post-300x151.png 300w, https:\/\/blog.index.pe\/wp-content\/uploads\/2017\/11\/codigo-post-768x387.png 768w, https:\/\/blog.index.pe\/wp-content\/uploads\/2017\/11\/codigo-post-1536x773.png 1536w, https:\/\/blog.index.pe\/wp-content\/uploads\/2017\/11\/codigo-post.png 1698w\" sizes=\"auto, (max-width: 680px) 100vw, 680px\" \/><\/a><\/li>\n<li><strong>Configure the options available in your administration panel:<\/strong><br \/>\n<a href=\"https:\/\/blog.index.pe\/wp-content\/uploads\/2017\/11\/code-config.png\" rel=\"lightbox-1\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-854 size-large\" src=\"https:\/\/blog.index.pe\/wp-content\/uploads\/2017\/11\/code-config-1024x516.png\" alt=\"\" width=\"680\" height=\"343\" srcset=\"https:\/\/blog.index.pe\/wp-content\/uploads\/2017\/11\/code-config-1024x516.png 1024w, https:\/\/blog.index.pe\/wp-content\/uploads\/2017\/11\/code-config-300x151.png 300w, https:\/\/blog.index.pe\/wp-content\/uploads\/2017\/11\/code-config-768x387.png 768w, https:\/\/blog.index.pe\/wp-content\/uploads\/2017\/11\/code-config-1536x773.png 1536w, https:\/\/blog.index.pe\/wp-content\/uploads\/2017\/11\/code-config.png 1698w\" sizes=\"auto, (max-width: 680px) 100vw, 680px\" \/><\/a><\/li>\n<\/ol>\n<p>Once the plugin is activated, when posting new entries on your blog you must add the tags of the corresponding programming language, which is indicated in the plugin&#039;s user manual:\u00a0<a href=\"https:\/\/blog.index.pe\/wp-content\/uploads\/2017\/11\/codes.png\" rel=\"lightbox-2\"><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-861 size-full\" src=\"https:\/\/blog.index.pe\/wp-content\/uploads\/2017\/11\/codes.png\" alt=\"\" width=\"869\" height=\"32\" srcset=\"https:\/\/blog.index.pe\/wp-content\/uploads\/2017\/11\/codes.png 869w, https:\/\/blog.index.pe\/wp-content\/uploads\/2017\/11\/codes-300x11.png 300w, https:\/\/blog.index.pe\/wp-content\/uploads\/2017\/11\/codes-768x28.png 768w\" sizes=\"auto, (max-width: 869px) 100vw, 869px\" \/><\/a><\/p>\n<p>From now on you can insert your code in your posts using the [ code ] tag, here is a sample:<\/p>\n<div class=\"hcb_wrap\">\n<pre class=\"prism line-numbers lang-html\" data-lang=\"HTML\"><code>[code]\n\n&lt;!doctype html&gt;\n&lt;html&gt;\n&lt;head&gt;\n&lt;meta charset=&quot;utf-8&quot;&gt;\n&lt;title&gt;Untitled Document&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;\n\n[\/code]<\/code><\/pre>\n<\/div>\n<p><strong>UPDATED 2022:<\/strong> We recommend the plugin <a href=\"https:\/\/es.wordpress.org\/plugins\/highlighting-code-block\/\" target=\"_blank\" rel=\"nofollow noopener\"><span>Highlighting Code Block<\/span><\/a>, <span>It supports \u201cBlocks Editor\u201d as well as \u201cClassic Editor\u201d. <\/span><span>(However, we recommend using it in the &quot;Blocks Editor&quot;.)<\/span><br \/>\n<script async=\"\" src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script><br \/>\n<script><br \/>\n  (adsbygoogle = window.adsbygoogle || []).push({<br \/>\n    google_ad_client: \"ca-pub-7016851332009441\",<br \/>\n    enable_page_level_ads: true<br \/>\n  });<br \/>\n<\/script><\/p>\n<div class=\"pvc_clear\"><\/div>\n<p id=\"pvc_stats_852\" class=\"pvc_stats all\" data-element-id=\"852\" style=\"\"><i class=\"pvc-stats-icon small\" aria-hidden=\"true\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" version=\"1.0\" viewbox=\"0 0 502 315\" preserveaspectratio=\"xMidYMid meet\"><g transform=\"translate(0,332) scale(0.1,-0.1)\" fill=\"\" stroke=\"none\"><path d=\"M2394 3279 l-29 -30 -3 -207 c-2 -182 0 -211 15 -242 39 -76 157 -76 196 0 15 31 17 60 15 243 l-3 209 -33 29 c-26 23 -41 29 -80 29 -41 0 -53 -5 -78 -31z\"\/><path d=\"M3085 3251 c-45 -19 -58 -50 -96 -229 -47 -217 -49 -260 -13 -295 52 -53 146 -42 177 20 16 31 87 366 87 410 0 70 -86 122 -155 94z\"\/><path d=\"M1751 3234 c-13 -9 -29 -31 -37 -50 -12 -29 -10 -49 21 -204 19 -94 39 -189 45 -210 14 -50 54 -80 110 -80 34 0 48 6 76 34 21 21 34 44 34 59 0 14 -18 113 -40 219 -37 178 -43 195 -70 221 -36 32 -101 37 -139 11z\"\/><path d=\"M1163 3073 c-36 -7 -73 -59 -73 -102 0 -56 133 -378 171 -413 34 -32 83 -37 129 -13 70 36 67 87 -16 290 -86 209 -89 214 -129 231 -35 14 -42 15 -82 7z\"\/><path d=\"M3689 3066 c-15 -9 -33 -30 -42 -48 -48 -103 -147 -355 -147 -375 0 -98 131 -148 192 -74 13 15 57 108 97 206 80 196 84 226 37 273 -30 30 -99 39 -137 18z\"\/><path d=\"M583 2784 c-38 -19 -67 -74 -58 -113 9 -42 211 -354 242 -373 16 -10 45 -18 66 -18 51 0 107 52 107 100 0 39 -1 41 -124 234 -80 126 -108 162 -133 173 -41 17 -61 16 -100 -3z\"\/><path d=\"M4250 2784 c-14 -9 -74 -91 -133 -183 -95 -150 -107 -173 -107 -213 0 -55 33 -94 87 -104 67 -13 90 8 211 198 130 202 137 225 78 284 -27 27 -42 34 -72 34 -22 0 -50 -8 -64 -16z\"\/><path d=\"M2275 2693 c-553 -48 -1095 -270 -1585 -649 -135 -104 -459 -423 -483 -476 -23 -49 -22 -139 2 -186 73 -142 361 -457 571 -626 285 -228 642 -407 990 -497 242 -63 336 -73 660 -74 310 0 370 5 595 52 535 111 1045 392 1455 803 122 121 250 273 275 326 19 41 19 137 0 174 -41 79 -309 363 -465 492 -447 370 -946 591 -1479 653 -113 14 -422 18 -536 8z m395 -428 c171 -34 330 -124 456 -258 112 -119 167 -219 211 -378 27 -96 24 -300 -5 -401 -72 -255 -236 -447 -474 -557 -132 -62 -201 -76 -368 -76 -167 0 -236 14 -368 76 -213 98 -373 271 -451 485 -162 444 86 934 547 1084 153 49 292 57 452 25z m909 -232 c222 -123 408 -262 593 -441 76 -74 138 -139 138 -144 0 -16 -233 -242 -330 -319 -155 -123 -309 -223 -461 -299 l-81 -41 32 46 c18 26 49 83 70 128 143 306 141 649 -6 957 -25 52 -61 116 -79 142 l-34 47 45 -20 c26 -10 76 -36 113 -56z m-2057 25 c-40 -58 -105 -190 -130 -263 -110 -324 -59 -707 132 -981 25 -35 42 -64 37 -64 -19 0 -241 119 -326 174 -188 122 -406 314 -532 468 l-58 71 108 103 c185 178 428 349 672 473 66 33 121 60 123 61 2 0 -10 -19 -26 -42z\"\/><path d=\"M2375 1950 c-198 -44 -350 -190 -395 -379 -18 -76 -8 -221 19 -290 114 -284 457 -406 731 -260 98 52 188 154 231 260 27 69 37 214 19 290 -38 163 -166 304 -326 360 -67 23 -215 33 -279 19z\"\/><\/g><\/svg><\/i> <img loading=\"lazy\" decoding=\"async\" width=\"16\" height=\"16\" alt=\"Loading\" src=\"https:\/\/blog.index.pe\/wp-content\/plugins\/page-views-count\/ajax-loader-2x.gif\" border=\"0\" \/><\/p>\n<div class=\"pvc_clear\"><\/div>\n<div style=\"margin-top: 0px; margin-bottom: 0px;\" class=\"sharethis-inline-reaction-buttons\" ><\/div>","protected":false},"excerpt":{"rendered":"<p>Surely you tried several times to include code in your WordPress posts without success, here we have the definitive solution, very simple and without errors so as not to die trying. To achieve this we are going to use the My Syntax Highlighter plugin which will allow us to insert all types of codes in our entries but without them being executed; Instead they will be displayed in a very visually attractive way, inside a code box and with the option of showing the \u201cplain text\u201d in case our reader wants to copy the original code. Installing it is very simple\u2026 Search, install and activate the plugin: Configure the available options<\/p>","protected":false},"author":1,"featured_media":844,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[102,173],"tags":[171,174,169],"class_list":["post-852","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorial","category-wordpress","tag-html","tag-syntax-highlighter","tag-wordpress"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/blog.index.pe\/en\/wp-json\/wp\/v2\/posts\/852","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.index.pe\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.index.pe\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.index.pe\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.index.pe\/en\/wp-json\/wp\/v2\/comments?post=852"}],"version-history":[{"count":0,"href":"https:\/\/blog.index.pe\/en\/wp-json\/wp\/v2\/posts\/852\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.index.pe\/en\/wp-json\/wp\/v2\/media\/844"}],"wp:attachment":[{"href":"https:\/\/blog.index.pe\/en\/wp-json\/wp\/v2\/media?parent=852"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.index.pe\/en\/wp-json\/wp\/v2\/categories?post=852"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.index.pe\/en\/wp-json\/wp\/v2\/tags?post=852"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}