Add styled code snippets to your pages, allowing you to share your expertise and code with others, create tutorials, provide examples and much more.
/* CSS Comment */
.class-name {
color: #000000;
background-color: #ffffff;
padding: 20px;
text-align: center;
border-radius: 12px;
}<!-- HTML Comment -->
<ul>
<li>Potato</li>
<li>Ginger</li>
<li>Beetroot</li>
<li>Carrot</li>
<li>Squash</li>
</ul>// Javascript Comment
function changeColor(newColor) {
const elem = document.getElementById('myid');
elem.style.color = newColor;
}// Swift Comment
private var imageName: String
var image: Image {
Image(imageName)
}The Syntax tool provides a great way to share code snippets with your visitors. Whether you're providing training, tutorials or something else, you'll have a beautiful way to stylistically share your code.
You can select from a large list of code languages, and have granular control over how each is displayed on the page.
Allows you to add a custom label to the top title bar of the tool. This lets you quickly identify what purpose you're using that tool for in your layout. This title is also visible when you've collapsed or hidden the contents of the tool in Edit Mode.
When enabled a small text title will be added to the top of the Syntax code tool's display. This optional text allows you to label the code for your visitors if you wish.
Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the main Title text. You're also provided an option to choose a custom one-off color as well.
Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the Syntax tool's Background. You're also provided an option to choose a custom one-off color as well.
When enabled Syntax will add a line number, for reference purposes, to the start of each line of code.
Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the optional Line Numbers. You're also provided an option to choose a custom one-off color as well.
Using this feature adds a divider line between the line numbers and the code within Syntax.
Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the optional Line Numbers Divider line. You're also provided an option to choose a custom one-off color as well.
You can enable this feature to add background coloring to alternating rows within your code. This makes for better legibility for your visitors.
When the Alternating Stiped Lines feature is in use you can use these two color pickers for styling the odd and even line backgrounds.
Enabling this setting will cause the line background color to change when a visitor hovers over a line of code within Syntax.
This color picker allows you to customize the background color used for the Line Hover Indicator feature above, when enabled.
Here you'll choose the language type for the code that you'll be using in this instance of Syntax. This tells the code parser which language it should interpert your input as so it can properly style it for you.
When using HTML within Syntax you MUST escape the text. If you're not familiar with escaping HTML code you'll want to do a web search for it. There are lots of free HTML escaping tools out there. This is not an optional step when using HTML in the Syntax tool.
In this section you will find color pickers and font weight controls for various aspects of the code styling within the Syntax tool. You can fully customize the code styling here using these controls and color pickers.
We've included some decorative dots in the upper left corner to simulate an OS or browser window. These are on by default but you can disable them if you don't wish to use them.
These three color pickers allow you to custom style the Decorative Dots if you've got them enabled, above.
Used to add a decorative shadow to the button. Foundry provides a variety of preset shadow styles, as well as access to a user defined preset that you can configure in the Control Center. Additionally for one-off shadows there is also a custom shadow option where you can create a unique shadow style, setting its positioning, size, spread and color.
Enabling this feature adds an HTML comment to the exported code to indicate the name of the tool being used here. This is helpful to both yourself and others when troubleshooting, or inspecting the code. This is enabled by default.
This field allows you to replace the default HTML Comment with your own text.
Allows you to specify an options class, or classes, that will be added to this tool's wrapper. You can use this to apply custom styling from the Blacksmith tool, or add a Bootstrap v5 preset class to your item. If you're applying more than one class be sure that you separate each class name with a space. Do not use special characters.