Code

Inline code

Wrap inline snippets of code with <code>. Be sure to escape HTML angle brackets.

The code element represents a fragment of computer code.

The <code>code</code> element represents a fragment of computer code.

Property Name (global/local)	Description
--hiq-code-padding-vertical --code-padding-vertical	Sets the top and bottom padding for code elements.
--hiq-code-padding-horizontal --code-padding-horizontal	Sets the left and right padding for code elements.
--hiq-code-border-color --code-border-color	Sets the border color for code elements.
--hiq-code-font-size --code-font-size	Sets the font size for code, kbd, pre, and samp elements.
--hiq-code-background-color --code-background-color	Sets the background color for code elements.
--hiq-code-text-color --code-text-color	Sets the text color for code elements.

Code blocks

The <pre> element defines preformatted text, usually used for multiple lines of code.

<p>This is a sample paragraph.</p>
<p>This is another sample paragraph.</p>

<pre><code>&lt;p&gt;This is a sample paragraph.&lt;/p&gt;
&lt;p&gt;This is another sample paragraph.&lt;/p&gt;
</code></pre>

Property Name (global/local)	Description
--hiq-pre-padding-vertical --pre-padding-vertical	Sets the top and bottom padding for pre elements.
--hiq-pre-padding-horizontal --pre-padding-horizontal	Sets the left and right padding for pre elements.
--hiq-pre-border-color --pre-border-color	Sets the border color for pre elements.
--hiq-pre-background-color --pre-background-color	Sets the background color for pre elements.
--hiq-pre-text-color --pre-text-color	Sets the text color for pre elements.

Variables

The <var> element represents a variable in a mathematical expression or programming context.

a + b = c

<var>a</var> + <var>b</var> = <var>c</var>

User input

Use the <kbd> element to indicate input that is typically entered via keyboard.

To install HiQ, enter npm install hiq in your terminal.
To cancel the installation process, press ctrl + c.

To install HiQ, enter <kbd>npm install hiq</kbd> in your terminal.<br>
To cancel the installation process, press <kbd><kbd>ctrl</kbd> + <kbd>c</kbd></kbd>.

Property Name (global/local)	Description
--hiq-kbd-padding-vertical --kbd-padding-vertical	Sets the top and bottom padding for kbd elements.
--hiq-kbd-padding-horizontal --kbd-padding-horizontal	Sets the left and right padding for kbd elements.
--hiq-kbd-border-color --kbd-border-color	Sets the border color for kbd elements.
--hiq-nested-kbd-font-weight --nested-kbd-font-weight	Sets the font weight for kbd elements that are nested within other kbd elements.
--hiq-kbd-background-color --kbd-background-color	Sets the background-color for kbd elements.
--hiq-kbd-text-color --kbd-text-color	Sets the text color for kbd elements.

Sample output

The <samp> element identifies sample output from a computer program.

I am HiQ. I am a lightweight, progressive CSS framework.

<samp>I am HiQ. I am a lightweight, progressive CSS framework.</samp>