Code Blocks

By default, HTML code blocks lack any form of syntax highlighting. In the case that syntax highlighting is not needed, the default <code> and <pre> elements are sufficient, which you can reference on the typography reference.

In situations where syntax highlighting is preferred, for example, within documentation or complex code examples, Prism has been brought in and styled for use in this project.

Code Block Examples

Below is an example of Prism being used to highlight the HTML markup of a blank page example for Material Admin Pro.

HTML isn't the only language that is supported. Here is an example of some CSS marked up using Prism.

Prism is certainly not limited to just HTML and CSS, almost 250 languages are supported with Prism. Visit Prism's documentation to see their list of supported languages and more examples.


Since Prism has been restyled to fit the Material Admin Pro theme, we recommend wrapping the code block in an outer element in order to make adjusting the background, padding, and spacing of the code block simpler. Prism can be used without a styled outer wrapper for certain use cases as well.

The recommended way to mark up a code block (both for semantics and for Prism) is a <pre> element with a <code> element inside, which is demonstrated below. When using this pattern, the <pre> element will automatically get the .language-{name} class, where name is one of the supported languages available with Prism.

Code block with styled wrapper:

Code block without wrapper:

Use of this plugin requires Prism to be brought into the page, which is loaded via CDN. Some JavaScript may be necessary if you are using uncommon languages as well, which is covered in the Material Admin Pro Documentation for this plugin.

Wrapping Code

In the above examples, unicode is being used to create the < and > symbols, which can be cumbersome when documenting larger blocks of code. An alternative, which will allow you to wrap large blocks of code without using unicode for characters, is to wrap code in the <script type='text/plain'></script> tag. You can see examples of this in action throughout the component, content, and utility documentation for Material Admin Pro.


The Prism theme included with Material Admin Pro is a custom theme. In order to change the colors, spacing, font, or any other characteristic of the theme, you can do so in the /scss/plugins/_prism.scss source code, or in the theme's CSS file if your license does not include the SCSS source.

Related Links