Back to all components

Display Code

A display code element allows you to show snippets of code in a clean, readable format.

It’s useful for tutorials, documentation, or technical blogs where you may need to demonstrate code examples directly on the page.

Key Features
  • Preformatted Styling: Automatically formats code snippets for better readability.
  • Syntax Highlighting:  Enhanced syntax display.
  • Responsive Design: Ensures code snippets are easy to read on any device.


 Examples
  • Programming Tutorials: Show step-by-step code for learners to follow.
  • Developer Blogs: Display code samples while explaining a specific technique or function.
  • API Documentation: Provide code snippets that developers can copy and use.

<!DOCTYPE html>
<html>
  <head>
    <title>Display Code Example</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>
Variations

Different styles and sizes can be utilised here.

You are also able to show / hide for certain roles. I.e a discussion forum for members only

<!DOCTYPE html>
<html>
  <head>
    <title>Display Code Example</title>
  </head>
  <body>
    <h1>Hello, World! This example uses Size 6 for half the page width</h1>
  </body>
</html>

Next

Document Library

The document library organises and displays downloadable files or documents in a user-friendly layout. This tool provides direct access to a Document Library for users (for this reason ensure that only users who have access to the page who you want t...

Read More
Previous: "Discussion"

This webpage was built with Mition