This site uses Markdown<\/a> for simplified input. Specifically, it adheres to the CommonMark spec<\/a>. Code is highlighted using highlight.js<\/a>.<\/p>\n There are two ways to add code to a post using Markdown. The most flexible way is to use "code fences", which entails wrapping the code between two lines containing 3 backticks (```) or tildes (~~~). Code fences allow you to add a language hint to tell the highlighter what language is in use. The other way to add code to a post is to indent the code with 4 spaces or a tab, which is covered further down in this post. The indent\/space option doesn't allow language hinting.<\/p>\n highlight.js doesn't always correctly guess the language of a piece of code. Limiting the set of loaded languages (like I have on this site) helps with that, as it will only use languages that are loaded. But the safest option is to add a language hint to all code fences:<\/p>\n To include code fence characters in a code block, say if you wanted to demonstrate how to write a code fence, you would wrap the code fence in a different number of backticks or tildes. Use the special language hint "nohighlight" if you don't want the output highlighted as code.<\/p>\n Note: You can always manually create the <pre><code>...<\/code><\/pre> tags, including the language hint (prefixed with "language-"). But there's really no need to do that since you can wrap anything in a code fence.<\/p>\n You can also add code by indenting it with a tab or 4 spaces. However, you cannot add a language hint to indented code blocks, so code fences are preferred.<\/p>\n To add inline code, wrap it in single backticks `like this`, which gives you a code tag To include a backtick inside a piece of inline code To include a backtick in regular text (not in inline code), escape it with a backslash: \\`<\/p>\n To exclude a code fence from syntax highlighting, use the language hint To exclude a <code> tag from syntax highlighting, use the class Background This site uses Markdown for simplified input. Specifically, it adheres to the CommonMark spec. Code is highlighted using highlight.js. Adding Code to a Post There are two ways to […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[1],"tags":[],"class_list":["post-1520","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"acf":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p9GNjN-ow","jetpack_likes_enabled":false,"_links":{"self":[{"href":"https:\/\/benjaminray.com\/codebase\/wp-json\/wp\/v2\/posts\/1520","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/benjaminray.com\/codebase\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/benjaminray.com\/codebase\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/benjaminray.com\/codebase\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/benjaminray.com\/codebase\/wp-json\/wp\/v2\/comments?post=1520"}],"version-history":[{"count":97,"href":"https:\/\/benjaminray.com\/codebase\/wp-json\/wp\/v2\/posts\/1520\/revisions"}],"predecessor-version":[{"id":2053,"href":"https:\/\/benjaminray.com\/codebase\/wp-json\/wp\/v2\/posts\/1520\/revisions\/2053"}],"wp:attachment":[{"href":"https:\/\/benjaminray.com\/codebase\/wp-json\/wp\/v2\/media?parent=1520"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/benjaminray.com\/codebase\/wp-json\/wp\/v2\/categories?post=1520"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/benjaminray.com\/codebase\/wp-json\/wp\/v2\/tags?post=1520"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Adding Code to a Post<\/h2>\n
Code fences using backticks or tildes:<\/h3>\n
```\nvar s = 'some test';\nconsole.log(s);\n```\n<\/code><\/pre>\n<\/p><\/div>\nvar s = 'new test';\nalert('test');\n<\/code><\/pre>\n<\/div>\n<\/div>\n~~~\nvar s = 'some test';\nconsole.log(s);\n~~~\n<\/code><\/pre>\n<\/p><\/div>\nvar s = 'new test';\nalert('test');\n<\/code><\/pre>\n<\/div>\n<\/div>\nLanguage Hinting<\/h4>\n
```vb\n' Some VB code\nDim str as String\nstr = New String("test")\n```\n<\/code><\/pre>\n<\/p><\/div>\n' Some VB code\nDim str as String\nstr = New String("test")\n<\/code><\/pre>\n<\/div>\n<\/div>\n~~~json\n{\n "firstName": "John",\n "lastName": "Smith",\n "age": 25\n}\n~~~\n<\/code><\/pre>\n<\/p><\/div>\n{\n "firstName": "John",\n "lastName": "Smith",\n "age": 25\n}\n<\/code><\/pre>\n<\/div>\n<\/div>\n````nohighlight\n```\nconst s = 'some test';\nconsole.log(s);\n```\n````\n<\/code><\/pre>\n<\/p><\/div>\n```\nconst s = 'some test';\nconsole.log(s);\n```\n<\/code><\/pre>\n<\/div>\n<\/div>\n\n<pre><code class="language-vb">\nProtected Sub PrepareEmailModal\n If Not Page.IsPostBack Then\n ' Populate email modal with some defaults\n ucModal.Subject = "Some Default Subject"\n ucModal.Body = "Some body content"\n End If\nEnd Sub\n<\/code><\/pre>\n<\/pre>\n<\/p><\/div>\n
Protected Sub PrepareEmailModal\n If Not Page.IsPostBack Then\n ' Populate email modal with some defaults\n ucModal.Subject = \"Some Default Subject\"\n ucModal.Body = \"Some body content\"\n End If\nEnd Sub<\/code><\/pre>\n<\/div>\n<\/div>\nIndented Code Blocks Using Tab or 4 Spaces:<\/h3>\n
const s = 'some test';\n console.log(s);\n<\/code><\/pre>\n<\/p><\/div>\nconst s = 'some test';\nconsole.log(s);\n<\/code><\/pre>\n<\/div>\n<\/div>\nInline Code and Backtick Characters<\/h2>\n
like this<\/code>. (Note: Inline code tags are not syntax highlighted.)<\/p>\nlike ` this<\/code>, open and close the code tag with a different number of backticks than appear in the inline code. E.g. If you want to display 1 backtick in the inline code, open\/close with two or more. To include two in a row in the code tag, open\/close with 1 or 3 or more. ``this`works`` becomes this`works<\/code>, `this``works` becomes this``works<\/code>, etc.
\nMore info here: https:\/\/meta.stackexchange.com\/a\/70679\/286764<\/a><\/p>\nCode Fences and <Code> Tags Without Syntax Highlighting<\/h2>\n
nohighlight<\/code>. E.g.:<\/p>\n```nohighlight\nconst someString = 'new test';\nalert(someString);\n```\n<\/code><\/pre>\n<\/p><\/div>\nconst someString = 'new test';\nalert(someString);\n<\/code><\/pre>\n<\/div>\n<\/div>\nnohighlight<\/code>. E.g.:<\/p>\n\n<pre>\n <code class="nohighlight">\n Some stuff inside a PRE tag\n <\/code>\n<\/pre>\n<\/pre>\n<\/p><\/div>\n
Some stuff inside a PRE tag<\/code><\/pre>\n<\/div>\n<\/div>\nCustom Attributes<\/h2>\n
```js title="Custom Title Attribute"\nconst someString = 'new test';\nalert(someString);\n```\n<\/code><\/pre>\n<\/p><\/div>\nconst someString = 'new test';\nalert(someString);\n<\/code><\/pre>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"