{"id":5962,"date":"2018-11-06T11:46:10","date_gmt":"2018-11-06T16:46:10","guid":{"rendered":"https:\/\/www.pair.com\/support\/kb\/?post_type=ht_kb&p=5962"},"modified":"2023-07-28T12:43:31","modified_gmt":"2023-07-28T16:43:31","slug":"gutenberg-editor-formatting-code-in-wordpress-posts","status":"publish","type":"ht_kb","link":"https:\/\/www.pair.com\/support\/kb\/gutenberg-editor-formatting-code-in-wordpress-posts\/","title":{"rendered":"Block Editor: Adding a Code Block in WordPress Posts"},"content":{"rendered":"

WP Enthusiast<\/p><\/a>

WP Professional<\/p><\/a>

WP Professional Plus<\/p><\/a>

PairSIM WordPress<\/p><\/a>

Podcast Websites<\/p><\/a><\/span><\/p>\n

Distinguishing the difference between regular text and code can be very helpful in technical articles. You can also<\/span> change WordPress fonts<\/span><\/a> and headings to help clarify sections. If you are looking to access the code editor in Gutenberg, see our article: Block Editor: How to Access the Code Editor<\/a>.<\/span><\/p>\n \t\t

\r\n \t\t\t \t\t\t \t\t\t\t

\r\n \t\t\t\t\tMake sure you are using the <\/span>Gutenberg block editor<\/span><\/a>. If you upgraded to <\/span>WordPress 5<\/span><\/a>, then your post and page editor will default to use the Gutenberg editor. If you are still using WordPress 4 (or earlier) or have the <\/span>Classic Editor<\/span><\/a> installed, then your editor will not work with this tutorial.<\/span> \t\t\t\t<\/p>\r\n \t\t\t \t\t\t\r\n \t\t<\/div>\r\n \t\t\n

Adding Code Block in WordPress Gutenberg<\/b><\/h3>\n \t\t
\r\n \t\t\t \t\t\t \t\t\t\t

\r\n \t\t\t\t\tThis is a tutorial for adding a code block, which only formats your text to look like code. It does not run the code<\/strong>; it merely displays it.\u00a0If you wish to edit the code and run it, see our article, How to Open Your Post's Code Editor.<\/a> \t\t\t\t<\/p>\r\n \t\t\t \t\t\t\r\n \t\t<\/div>\r\n \t\t\n

    \n
  1. Open a post or page editor<\/span><\/li>\n
  2. Click the plus button to add a block\"plus<\/a><\/span><\/li>\n
  3. Select the code block\"code<\/a><\/span><\/li>\n
  4. Enter the text you want to be formatted as code into the code block\"write<\/a><\/span><\/li>\n<\/ol>\n

    All text within the code block will be formatted however your theme formats code. Click the <\/span>Preview <\/b>button to see a preview of how this will look when published.\"code<\/a> <\/span><\/p>\n","protected":false},"excerpt":{"rendered":"

    Distinguishing the difference between regular text and code can be very helpful in technical articles. You can also change WordPress fonts and headings to help clarify sections. If you are looking to access the code editor in Gutenberg, see our article: Block Editor: How to Access the Code Editor. Adding…<\/p>\n","protected":false},"author":11,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":[],"ht-kb-category":[197],"ht-kb-tag":[198,205,185],"yoast_head":"\nBlock Editor: Adding a Code Block in WordPress Posts - Knowledge Base - Pair Networks<\/title>\n<meta name=\"description\" content=\"Distinguishing the difference between regular text and code can be very helpful in technical articles. This is just one of the ways you can use Gutenberg.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.pair.com\/support\/kb\/gutenberg-editor-formatting-code-in-wordpress-posts\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Block Editor: Adding a Code Block in WordPress Posts - Knowledge Base - Pair Networks\" \/>\n<meta property=\"og:description\" content=\"Distinguishing the difference between regular text and code can be very helpful in technical articles. This is just one of the ways you can use Gutenberg.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.pair.com\/support\/kb\/gutenberg-editor-formatting-code-in-wordpress-posts\/\" \/>\n<meta property=\"og:site_name\" content=\"Knowledge Base - Pair Networks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/pairnetworks\/\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-28T16:43:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.pair.com\/support\/kb\/wp-content\/uploads\/2018\/11\/Plus-button.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@pairNetworks\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.pair.com\/support\/kb\/gutenberg-editor-formatting-code-in-wordpress-posts\/\",\"url\":\"https:\/\/www.pair.com\/support\/kb\/gutenberg-editor-formatting-code-in-wordpress-posts\/\",\"name\":\"Block Editor: Adding a Code Block in WordPress Posts - Knowledge Base - Pair Networks\",\"isPartOf\":{\"@id\":\"https:\/\/www.pair.com\/support\/kb\/#website\"},\"datePublished\":\"2018-11-06T16:46:10+00:00\",\"dateModified\":\"2023-07-28T16:43:31+00:00\",\"description\":\"Distinguishing the difference between regular text and code can be very helpful in technical articles. This is just one of the ways you can use Gutenberg.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.pair.com\/support\/kb\/gutenberg-editor-formatting-code-in-wordpress-posts\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.pair.com\/support\/kb\/gutenberg-editor-formatting-code-in-wordpress-posts\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.pair.com\/support\/kb\/gutenberg-editor-formatting-code-in-wordpress-posts\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.pair.com\/support\/kb\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Block Editor: Adding a Code Block in WordPress Posts\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.pair.com\/support\/kb\/#website\",\"url\":\"https:\/\/www.pair.com\/support\/kb\/\",\"name\":\"Knowledge Base - Pair Networks\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.pair.com\/support\/kb\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.pair.com\/support\/kb\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.pair.com\/support\/kb\/#organization\",\"name\":\"Pair Networks\",\"url\":\"https:\/\/www.pair.com\/support\/kb\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.pair.com\/support\/kb\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.pair.com\/support\/kb\/wp-content\/uploads\/2022\/02\/Gb_TUkUE_400x400.jpeg\",\"contentUrl\":\"https:\/\/www.pair.com\/support\/kb\/wp-content\/uploads\/2022\/02\/Gb_TUkUE_400x400.jpeg\",\"width\":360,\"height\":360,\"caption\":\"Pair Networks\"},\"image\":{\"@id\":\"https:\/\/www.pair.com\/support\/kb\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/pairnetworks\/\",\"https:\/\/twitter.com\/pairNetworks\",\"https:\/\/www.instagram.com\/pairnetworks\/\",\"https:\/\/www.linkedin.com\/company\/2269676\/\",\"https:\/\/www.pinterest.com\/pairnetworksinc\/pins\/\",\"https:\/\/www.youtube.com\/user\/pairnetworks\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Block Editor: Adding a Code Block in WordPress Posts - Knowledge Base - Pair Networks","description":"Distinguishing the difference between regular text and code can be very helpful in technical articles. This is just one of the ways you can use Gutenberg.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.pair.com\/support\/kb\/gutenberg-editor-formatting-code-in-wordpress-posts\/","og_locale":"en_US","og_type":"article","og_title":"Block Editor: Adding a Code Block in WordPress Posts - Knowledge Base - Pair Networks","og_description":"Distinguishing the difference between regular text and code can be very helpful in technical articles. This is just one of the ways you can use Gutenberg.","og_url":"https:\/\/www.pair.com\/support\/kb\/gutenberg-editor-formatting-code-in-wordpress-posts\/","og_site_name":"Knowledge Base - Pair Networks","article_publisher":"https:\/\/www.facebook.com\/pairnetworks\/","article_modified_time":"2023-07-28T16:43:31+00:00","og_image":[{"url":"https:\/\/www.pair.com\/support\/kb\/wp-content\/uploads\/2018\/11\/Plus-button.png"}],"twitter_card":"summary_large_image","twitter_site":"@pairNetworks","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.pair.com\/support\/kb\/gutenberg-editor-formatting-code-in-wordpress-posts\/","url":"https:\/\/www.pair.com\/support\/kb\/gutenberg-editor-formatting-code-in-wordpress-posts\/","name":"Block Editor: Adding a Code Block in WordPress Posts - Knowledge Base - Pair Networks","isPartOf":{"@id":"https:\/\/www.pair.com\/support\/kb\/#website"},"datePublished":"2018-11-06T16:46:10+00:00","dateModified":"2023-07-28T16:43:31+00:00","description":"Distinguishing the difference between regular text and code can be very helpful in technical articles. This is just one of the ways you can use Gutenberg.","breadcrumb":{"@id":"https:\/\/www.pair.com\/support\/kb\/gutenberg-editor-formatting-code-in-wordpress-posts\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.pair.com\/support\/kb\/gutenberg-editor-formatting-code-in-wordpress-posts\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.pair.com\/support\/kb\/gutenberg-editor-formatting-code-in-wordpress-posts\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.pair.com\/support\/kb\/"},{"@type":"ListItem","position":2,"name":"Block Editor: Adding a Code Block in WordPress Posts"}]},{"@type":"WebSite","@id":"https:\/\/www.pair.com\/support\/kb\/#website","url":"https:\/\/www.pair.com\/support\/kb\/","name":"Knowledge Base - Pair Networks","description":"","publisher":{"@id":"https:\/\/www.pair.com\/support\/kb\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.pair.com\/support\/kb\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.pair.com\/support\/kb\/#organization","name":"Pair Networks","url":"https:\/\/www.pair.com\/support\/kb\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.pair.com\/support\/kb\/#\/schema\/logo\/image\/","url":"https:\/\/www.pair.com\/support\/kb\/wp-content\/uploads\/2022\/02\/Gb_TUkUE_400x400.jpeg","contentUrl":"https:\/\/www.pair.com\/support\/kb\/wp-content\/uploads\/2022\/02\/Gb_TUkUE_400x400.jpeg","width":360,"height":360,"caption":"Pair Networks"},"image":{"@id":"https:\/\/www.pair.com\/support\/kb\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/pairnetworks\/","https:\/\/twitter.com\/pairNetworks","https:\/\/www.instagram.com\/pairnetworks\/","https:\/\/www.linkedin.com\/company\/2269676\/","https:\/\/www.pinterest.com\/pairnetworksinc\/pins\/","https:\/\/www.youtube.com\/user\/pairnetworks"]}]}},"_links":{"self":[{"href":"https:\/\/www.pair.com\/support\/kb\/wp-json\/wp\/v2\/ht-kb\/5962"}],"collection":[{"href":"https:\/\/www.pair.com\/support\/kb\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/www.pair.com\/support\/kb\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/www.pair.com\/support\/kb\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/www.pair.com\/support\/kb\/wp-json\/wp\/v2\/comments?post=5962"}],"version-history":[{"count":15,"href":"https:\/\/www.pair.com\/support\/kb\/wp-json\/wp\/v2\/ht-kb\/5962\/revisions"}],"predecessor-version":[{"id":9246,"href":"https:\/\/www.pair.com\/support\/kb\/wp-json\/wp\/v2\/ht-kb\/5962\/revisions\/9246"}],"wp:attachment":[{"href":"https:\/\/www.pair.com\/support\/kb\/wp-json\/wp\/v2\/media?parent=5962"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.pair.com\/support\/kb\/wp-json\/wp\/v2\/ht-kb-category?post=5962"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.pair.com\/support\/kb\/wp-json\/wp\/v2\/ht-kb-tag?post=5962"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}