By default, HTML code blocks lack any form of syntax highlighting. In the case that syntax highlighting is not needed, the default
elements are sufficient, which you can reference on the
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
element with a
element inside, which is demonstrated below. When using this pattern, the
element will automatically get the
is one of the
available with Prism.
Code block with styled wrapper:
Code block without wrapper:
In the above examples, unicode is being used to create the
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
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
source code, or in the theme's CSS file if your license does not include the SCSS source.