1. Resources
  2. /
  3. Blog
  4. /
  5. Control layout and styling in Build Annotations

Control layout and styling in Build Annotations

1 minute read

We’ve just rolled out a number of big improvements to annotations, with the aim to give you more control for what you can create.

Firstly, annotation markdown rendering now uses a CommonMark compliant parser, and supports most of the GitHub Flavored Markdown features including GitHub’s shorthand table syntax and strikethroughs 💪

1
2
3
4
First Header | Second Header
------------ | -------------
Content from cell 1 | Content from cell 2
Content in the first column | Content in the second column

Secondly, we’ve improved the styling for many HTML elements, including tables—everything now looks much more tidy ✨ These new styles apply to new annotations, existing annotations, and to any new build notification emails.

A table inside an annotation, demonstrating the new styling

Thirdly, we’ve added a whole range of CSS classes (based on Basscss) that give you layout, type and other styling controls within annotation bodies. This means you can present information much more clearly, by using flexbox, margins, padding, and a type scale. 🎨

A coverage annotation in Buildkite, taking advantage of some Basscss classes

And finally, we’ve put together a small Annotation Tester pipeline (which uses block steps in its pipeline.yml) to help you experiment with annotation formatting for both Markdown and HTML markup. 🔨

Authoring an annotation within Buildkite using the new Annotation Tester pipeline

To get started with your own annotations, and to see what’s changed, check out the the buildkite-agent annotate documentation.

Whether you’re authoring a plugin, or adding annotations from inside your build scripts, we’re excited to see what you create with these new annotation superpowers! ✨


Related posts

Start turning complexity into an advantage

Create an account to get started with a 30-day free trial. No credit card required.

Buildkite Pipelines

Platform

  1. Pipelines
  2. Pipeline templates
  3. Public pipelines
  4. Test Engine
  5. Package Registries
  6. Mobile Delivery Cloud
  7. Pricing

Hosting options

  1. Self-hosted agents
  2. Mac hosted agents
  3. Linux hosted agents

Resources

  1. Docs
  2. Blog
  3. Changelog
  4. Webinars
  5. Plugins
  6. Case studies
  7. Events

Company

  1. About
  2. Careers
  3. Press
  4. Brand assets
  5. Contact

Solutions

  1. Replace Jenkins
  2. Workflows for AI/ML

Support

  1. System status
  2. Forum