Skip to content

Latest commit

 

History

History
93 lines (74 loc) · 3.66 KB

highlighting.md

File metadata and controls

93 lines (74 loc) · 3.66 KB
Raw

Syntax Highlighting Libraries

We have Bicep support for a number of different highlighting libraries available. This document covers what is currently available.

Textmate

Bicep has a Textmate grammar available at bicep.tmlanguage.

Known uses

  • Bicep VSCode extension: Used as a fallback grammar for when semantic token colorization is not ready, or is disabled. This is configured here.
  • Bicep Visual Studio extension: Used as a fallback grammar for when the Bicep Visual Studio extension is not installed or when semantic token colorization is not ready.
  • GitHub Linguist: Used to provide colorization for .bicep files and Markdown snippets posted on GitHub with ```bicep code blocks. The Bicep repo is configured as a git submodule, so changes to the .tmlanguage file in this repo should be automatically picked up when a new release of Linguist is deployed.

Notes

To recompile it, run:

cd src/textmate
npm ci
npm run build

To run tests:

cd src/textmate
npm ci
npm test

Previewing baselines (launch an HTTP server, which can be opened in a browser to view the various HTML files):

npx http-server ./src/textmate/test/baselines

Highlight.js

Bicep has a highlight.js plugin available at bicep.min.js. The source is available at bicep.ts.

Usage

  1. Use bicep.min.js in a <script> tag.
  2. Use 'bicep' as the highlight.js language name.
  3. See index.html for a usage example.

Known uses

  • MS Docs: It's used to provide colorization for Bicep samples in MS Docs. This site is using a fork of Highlight.js, so changes to the grammar must be compiled and submitted to the fork repo for integration.

Notes

To build it, run:

cd src/highlightjs
npm ci
npm run build

To run tests:

cd src/highlightjs
npm ci
npm test

Previewing baselines (launch an HTTP server, which can be opened in a browser to view the various HTML files):

npx http-server ./src/highlightjs/test/baselines

Monarch

Bicep has a Monarch plugin available at bicep.ts.

Known uses

  • Monaco: Bundled with Monaco - contributed here.

  • Azure DevOps: Used to provide colorization for Bicep samples in Azure DevOps.

Notes

To build it, run:

cd src/monarch
npm ci
npm run build

To run tests:

cd src/monarch
npm ci
npm test

Previewing baselines (launch an HTTP server, which can be opened in a browser to view the various HTML files):

npx http-server ./src/monarch/test/baselines

Prism.js

Bicep has a community-contributed Prism.JS highlighter available here.