Skip to content
maka-img_mm_marketplace
maka marketplace

Discover Products to help you POWER up with CMS Hub

maka-img_mm_power-pro
Power Pro Theme

Check out the POWER demo and see all the latest features

maka-img_mm_performance
Performance

POWER is optimized to perform, review the results

maka-img_mm_customer-showcase
Customer Showcase

See how our customers used the POWER Theme

POWER Pro V35 released on December 21st 2023 – Read Changelog

maka-img_mm_documentation_3
Getting Started

Follow our guide to save time and avoid missing a step

maka-img_mm_module-library
Module Library

From page speed impact to set up instructions, you'll find it all

maka-img_mm_video-tutorials
Video tutorials

Find all POWER videos in the same spot for quick answers

maka-mm_faq-2
FAQs

Have questions?
Search for answers

Experiencing an issue with POWER? Submit a support ticket here

maka-img_mm_about-us
About us

“Would I rather be feared or loved? Easy. Both. I want people to be afraid of how much they love me.”
– Michael Scott, not us

maka-img_mm_blog
Blog

This is mostly a demo right now. We are working on some really cool things around the office.

maka-img_mm_career
Career

Quite possibly the most fun you will have at work, ever. Did we mention how cool we are?

Having issues with POWER?
SUBMIT A SUPPORT TICKET


Schedule a Q&A or Demo
PREPURCHASE CONSULTATION


Looking for Custom Development?
REQUEST A QUOTE


Other questions?
CONTACT US / CHAT BOT

Code Highlighting

How to use the code and pre tags to add syntax code highlighting on your website pages

pwr-icon_feature-maka-code-highlight

CODE  HIGHLIGHTING

Automatically apply syntax highlighting to over 150 programming languages to add code blocks and inline code to your website or blog.

code-syntax-highlighting-example-power-pro-theme

FAQ

What languages can be used for code highlighting?

There are over 150 languages to choose from, only select the languages you need.

Setup Instructions

Helpful Links: Settings for Theme Styles

Code Highlighting is set up in two steps. First, the theme settings have to be updated to include the code languages and set the style options; then the HTML tag has to be placed to create the inline code or code block.

Automatic Code Highlighting for POWER Theme

Theme Settings → Styling → Code Highlighting

Code Highlighting is enabled by default and includes 11 languages that are styled automatically.

Additional languages can be configured in the Theme Settings, with over 150 programming languages to choose from.

theme-settings-code-highlighting-defaults-enabled

Within the theme settings, you can choose Light or Dark color scheme, decide whether to include line numbers and also choose whether the code can be copied.

Add Code Highlighting to Your Website Text

There are two HTML tags that you can use in text fields and rich text editors throughout the modules, using the code HTML tag will create inline styling, and using the pre HTML tag combined with the code tag will create a code block.

There are two ways you can add the tags, one is through the WYSIWYG editor (the toolbar) and the other is by editing the source code.

Adding Code Syntax with the WYSIWYG toolbar

This method allows you to apply the necessary tags without editing the code directly. There are two settings that need to be updated to create a code block, but only one if you are adding inline code.

Page Editor  → Module → Rich Text Editor → More → Code Format

All code will need to have the code format applied, for both inline code and code blocks.

From the rich text editor, first highlight the text you need to apply the code highlighting to, then click More, and then click the code format icon.

rich-text-code-format

This will apply the code HTML tag and apply the syntax styles.

Page Editor  → Module → Rich Text Editor → Style Control

To create a code block, the pre tag also needs to be added. This is necessary if you want to use the copy function.

With the code text still highlighted, from the toolbar, click on the Style Control (most likely shows "Paragraph" by default) and change to "Pre" to apply the pre HTML tag and create the code block.

code-style-rich-text-editor

Page Editor  → Module → Rich Text Editor → Advanced → Source Code

If you prefer working with code, you can add the pre and code tags directly via the source code editor.

source-code-rich-text-code-block-tags

To apply syntax highlighting to inline code, you will need to add the code Tag around your programming language:

To create a code block, you will need to add the pre and code Tags around your programming language:

Next Steps

With Code Highlighting ready to go, you can configure your FontAwesome Pro kit for use with POWER Pro!

Next up:

NEVER MISS A POWER UPDATE

We are continuously improving our modules and updating our documentation. Stay in the loop.