Code Component

Code component is the <pre> and <code> tags meant for displaying preformatted statements or specifically, computer codes in the HTML. Bissetii styles the standard W3C HTML tags seemlessly with and without Hugo-specific features.

As Hugo is getting upgraded from time to time, this component becomes more robust in terms Hugo-specific growth.

This component is available starting from v1.11.0.

Sass Styling Parts

The Sass styling script responsible for styling both <pre> and <code> tags is located in:

assets/css/bissetii/modules/core/_Codes.scss

Colors

Currently, Bisseti theme both <pre> and <code> to have the same background color: theme-based border color and grey text background.

Mobile Friendly

After various testing, it is better to opt for scrolling when the contents are overflowing in both x and y directions.

Go Chroma Rendering Adjustment

Due to the requirement to support Hugo as a theme module and Hugo started to use Go Chroma to perform syntax highlighting, Bissetii has to inheritly support Go Chroma rendering adjustment as a module.

This is an optional module since not everyone is using Go Chroma to render code blocks. To include Go Chroma adjustment, you need to enable Go Chroma config in your Sass configuration file:

$config-gochroma: 1

Javascript Parts

This component does not depend on any javascript.

HTML Parts

Bissetii focuses on these 3 main HTML codes that constitutes the code components.

Inline <code> Wrap

This is for writing computer codes alongside a text. Example:

1
<p>For the love of programming, <code>this_is_a_code()</code>.</p>

This will render as:

For the love of programming, this_is_a_code().

<pre> with inline <code> Wrap

This is the standard approach for large code snippet. A <code> tag is inside <pre> wrap to denote that the preformatted contents are actually computer codes. Example:

1
2
3
4
<pre><code>This_is_a_code_inside_preformatted_wrap() {
	containing another code.
}
This_is_a_code()</code></pre>

This will render as:

This_is_a_code_inside_preformatted_wrap() {
	containing another code.
}
This_is_a_code()

<pre> Only Wrap

This is seen in some web scraping where some developers do not wrap the codes inside a <code> tag. While it is not encouraged, Bissetii had it covered just in case. Here’s an example:

1
2
3
4
5
6
<pre>
This_is_a_code_displayed_in_preformatted_wrap() {
	containing another code.
}
This_is_a_code()
</pre>

This will render as:

This_is_a_code_displayed_in_preformatted_wrap() {
	containing another code.
}
This_is_a_code()