Skip to main content
To enhance your collaboration during code development and review, Box’s web app enables you to add code blocks to your Box Notes. In Box Notes, a code block contains a scrollable text field, a language selection field, and a selection to remove the code block. After adding a code block, you can either paste or type code into your code block’s text field. Code blocks in Box Notes support the following software languages:
  • Bash shell
  • C
  • C++
  • C#
  • CSS
  • Dart
  • Go
  • HTML
  • JavaScript
  • Perl
  • PHP
  • PowerShell
  • Python Java
  • R
  • Ruby
  • Rust
  • Scala
  • SQL
  • Swift
IMPORTANT:
  • After selecting a language for your code block, you cannot select a different language for that code block.
  • Box Notes does not support the use of code blocks on mobile devices.
As with all content in Box Notes, multiple people can simultaneously edit a code block’s contents.
When someone is working in your code block’s contents, Box displays a collaboration icon in the code block’s text field identifying the person’s user name.
Collaborators with Read-only permission can view but not edit a code block’s contents.
Note:Box Notes does not support the insertion of other Box Note elements — for example, tables, images, call-out boxes, headings, or other code blocks — into code blocks. To learn more about using other Box Notes elements, start here.
To insert a code block in a Box Note:
  1. Click where you want to insert a code block. Beside the cursor, Box displays +.
  2. Click + then select Code Block.
  3. Type or paste the code into your code block’s text field.
To select a software language for your code block:
  1. In the top-left corner of the code block, click the menu icon. Box displays a drop-down menu.
  2. In the drop-down menu, click the software language you want to use. After selecting a language, you cannot select a different language for this code block.
To search for and select a software language for your code block:
  1. In the top-left corner of the code block, click the menu icon. Box displays a drop-down menu.
  2. In the Search Languages field, type the name of the software language you want to use. As you type, Box displays available languages.
  3. Click the software language you want to use. After selecting a language, you cannot select a different language for this code block.
To remove a code block:
  1. In the top-right corner of the code block, click the ellipsis, ”…”.
  2. Select Remove.
To increase or reduce a code block’s height:
  1. Hover your mouse in the code block, then right-click.
  2. To increase height, click Expand. To decrease height, click Collapse.
Adding a Mermaid Diagram To help with visualizing logic procedures and operations, you can create a Mermaid diagram in several ways:
  • From the context menu: Click the ”+” menu and select Mermaid directly — the language is pre-selected.
  • From a code block: Add a code block, then choose Mermaid from the language dropdown.
  • Using Box AI: Ask Box AI (inline or from the side panel) to generate diagrams and charts for you. You can also highlight a table and ask inline AI to generate a Mermaid pie chart from it.