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.
Usage
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.
Theming
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
Prism is a lightweight, extensible syntax highlighter.