{
  "$type": "site.standard.document",
  "canonicalUrl": "https://johnnyreilly.com/posts/bicep-syntax-highlighting-with-prismjs",
  "description": "Learn how to write attractive code snippets about Bicep using PrismJS and Docusaurus. This post shows you how to add syntax highlighting for Bicep.",
  "path": "/posts/bicep-syntax-highlighting-with-prismjs",
  "publishedAt": "2021-08-19T00:00:00.000Z",
  "site": "at://did:plc:yy3apqjlms24kso7ahn7lbmb/site.standard.publication/3mova7c4nho2b",
  "tags": [
    "bicep"
  ],
  "textContent": "Bicep is an amazing language, it's also very new. If you want to write attractive code snippets about Bicep, you can by using PrismJS (and Docusaurus). This post shows you how.\n\n\n\nSyntax highlighting\n\nI've been writing blog posts about Bicep for a little while. I was frustrated that the code snippets were entirely unhighlighted. I'm keen my posts are as readable as possible, and so I looked into adding support to PrismJS which is what Docusaurus uses to power syntax highlighting.\n\nWhilst my regex fu is amateur at best, happily Michael Schmidt of the PrismJS family is considerably better. He took the support I added and made it much better.\n\nDocusaurus meet Bicep\n\nIf you have any code snippets that start with three backticks and the word bicep...\n\nbicep\n// code goes here...\njs\n    prism: {\n      additionalLanguages: [\"powershell\", \"csharp\", \"docker\", \"bicep\"],\n    },\njson\n  \"resolutions\": {\n    \"prismjs\": \"PrismJS/prism\"\n  },\n\nprismjs@PrismJS/prism, prismjs@^1.23.0:\n  version \"1.24.1\"\n  resolved \"https://codeload.github.com/PrismJS/prism/tar.gz/59f449d33dc9fd19302f21aad95fc0b5028ac830\"\nbicep\nparam repositoryUrl string\nparam repositoryBranch string\n\nparam location string = 'westeurope'\nparam skuName string = 'Free'\nparam skuTier string = 'Free'\n\nparam appName string\n\nresource staticWebApp 'Microsoft.Web/staticSites@2020-12-01' = {\n  name: appName\n  location: location\n  tags: tagsObj\n  sku: {\n    name: skuName\n    tier: skuTier\n  }\n  properties: {\n    // The provider, repositoryUrl and branch fields are required for successive deployments to succeed\n    // for more details see: https://github.com/Azure/static-web-apps/issues/516\n    provider: 'DevOps'\n    repositoryUrl: repositoryUrl\n    branch: repositoryBranch\n    buildProperties: {\n      skipGithubActionWorkflowGeneration: true\n    }\n  }\n}\n```\n\nAs you can see, it's delightfully highlighted by PrismJS. Enjoy!",
  "title": "Bicep: syntax highlighting with PrismJS (and Docusaurus)"
}