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>

Document Library

The document library organises and displays downloadable files or documents in a user-friendly layout. I. e a document library for staff only, or volunteers only. The documents themselves are managed as part of the Document Library modu...