Code Snippet Block

How to reuse your code snippets in an easy way

Updated over a week ago

The new Code Snippet Block lets you share and reuse your code snippets in a quick and simplified way. With the Code Snippet Block, you can document general codes in several coding languages, not limited to UI or frontend codes but including backend code, native mobile code, or queries as well.

The common depository of snippets creates efficient collaboration between developers and designers when creating digital products such as your website.

Use this Content Block together with other blocks in your Guidelines - for example, the Storybook Block - to contextualize your codes. Built using the new Brand SDK technology, now you have even more options to customize your blocks to be on-brand.

Open to your Brand Guidelines, and in Edit mode, add the Code Snippet Block.

The block supports the following coding languages:

  • CoffeeScript

  • CSS

  • Sass

  • C

  • C++

  • C#

  • Go

  • HTML

  • Java

  • JavaScript

  • JSON

  • JSX

  • Kotlin

  • LiveScript

  • Markdown

  • Plain text

  • Phyton

  • PHP

  • Shell

  • SQL

  • Swift

  • TypeScript

  • TSX

  • XML

  • Yaml

Now you can change the layout of your Code Snippet Block by adding a snippet heading indicating your coding language or the number of rows for easy readability of your code.

In your setting, you can also apply color schemes that fit your coding language and personal preferences.

The new Style options also enable you to add a border around your code snippet or define a corner radius to your block to fit perfectly into your brand’s identity.

We hope you have found this article helpful. In case you have any further questions, please don’t hesitate to contact our support team.

Did this answer your question?