Creating Code Blocks

Code blocks are elements that contain code or styles

Code blocks are simply elements that contain code or styles.

Once you create a code block you add it to an artboard and that code is added to your exported page.

For example, if you wanted to make the page background black you could add the CSS to the code block:

<style>
body {
   background-color: black;
}
</style>

To create a code block:

1. Add an any element to the artboard. I recommend a Text field.

2. In the Element Properties dialog or panel expand the Markup Inside field

3. Enter the markup, code or style you want to add to the page

4. Click OK

5. Add it to the desired artboard

Optionally you can make this a component and reuse it across multiple artboards and projects.

And optionally, you can set the tag name to "none" to prevent the enclosing tag to be exported.

Example Project

https://github.com/velara3/xd-examples/tree/master/web-export/examples/code-blocks