GitHub Gists<\/a> can be useful for this too. Perhaps my favorite reason for using third-party tools for this is that you can go update the demo there and the blog post automatically has the new code. You don’t have to update stuff in two places.<\/p>\n
\nDo you have your own way of handling code blocks on a WordPress site? Do share.<\/p>\n","protected":false},"excerpt":{"rendered":"
Originally published in February 2014, now updated\/corrected\/expanded. So you’ve installed WordPress and want to blog about code. Yay! You’re a hero and I thank on behalf of myself an coders everywhere. Here’s what you’ll need to do and think about to actually get publishing blocks of code.<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[264],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":331990,"url":"https:\/\/css-tricks.com\/styling-code-in-and-out-of-blocks\/","url_meta":{"origin":163047,"position":0},"title":"Styling Code In and Out of Blocks","date":"January 6, 2021","format":false,"excerpt":"There is a tag in HTML. I literally just used it to wrap that tag in the previous sentence \u2014 so meta. It is an inline-by-default element that denotes any sort of code. It has default (user agent) styles that apply a monospace font-family, which feels like a fine\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/01\/code-block-screenshot.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":242145,"url":"https:\/\/css-tricks.com\/considerations-styling-pre-tag\/","url_meta":{"origin":163047,"position":1},"title":"Considerations for styling the `pre` tag","date":"May 26, 2016","format":false,"excerpt":"You've probably used it. It's that very special tag in HTML that allows for the white space within the tags to actually be honored. For example, four spaces will actually be four spaces! That's unlike how HTML normally works, where white space \"collapses\" (the four spaces will become one). The\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2016\/05\/Screen-Shot-2016-05-21-at-9.02.25-AM.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":8618,"url":"https:\/\/css-tricks.com\/show-and-edit-style-element\/","url_meta":{"origin":163047,"position":2},"title":"Show and Edit Style Element","date":"March 2, 2011","format":false,"excerpt":"Kind of a classic little trick for ya'll today. You know the View Demo That's how all the code on The Shapes of CSS page is done. Not only is it just kinda neat, but it's very useful on a page like that so you don't have to maintain the\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/03\/editcss.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":341720,"url":"https:\/\/css-tricks.com\/code-blocks-but-better\/","url_meta":{"origin":163047,"position":3},"title":"Code blocks, but better","date":"June 1, 2021","format":false,"excerpt":"Pedro Duarte made a wishlist for styled code blocks in blog posts and documentation, then hand-rolls a perfect solution for that wishlist. For example, a feature to be able to highlight certain lines or words within the code block. The line highlighter is unique in that it only syntax highlights\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/Screen-Shot-2021-05-31-at-9.58.54-AM.png?fit=1200%2C521&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":311071,"url":"https:\/\/css-tricks.com\/wordpress-block-transforms\/","url_meta":{"origin":163047,"position":4},"title":"WordPress Block Transforms","date":"May 19, 2020","format":false,"excerpt":"This has been the year of Gutenberg for us here at CSS-Tricks. In fact, that's a goal we set at the end of last year. We're much further along that I thought we'd be, authoring all new content in the block editor\u00b9, enabling the block editor for all content now.\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/05\/wordpress-editor-convert-to-blocks.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":374910,"url":"https:\/\/css-tricks.com\/managing-css-styles-in-a-wordpress-block-theme\/","url_meta":{"origin":163047,"position":5},"title":"Managing CSS Styles in a WordPress Block Theme","date":"November 7, 2022","format":false,"excerpt":"The way we write CSS for WordPress themes is in the midst of sweeping changes. I recently shared a technique for adding fluid type support in WordPress by way of theme.json, a new file that WordPress has been pushing hard to become a central source of truth for defining styles\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/wordpress-logo-paintbrush.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/163047"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=163047"}],"version-history":[{"count":26,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/163047\/revisions"}],"predecessor-version":[{"id":210596,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/163047\/revisions\/210596"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=163047"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=163047"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=163047"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}