Fire UI Getting Started
Introduction Download Customize
Layout
Container Grid
Components
Accordion Box Buttons Code Color and theme Form Modal Navigation bar Slideshow Spacing Table Tabs Tooltip

Code

To use only Fire UI code feature, copy and paste the stylesheet link into your head element to load Fire UI code CSS.

<link rel="stylesheet" type="text/css" href="https://unpkg.com/@fire-ui/fire-ui@0.1.1/src/feature/Code/code.css">

How to use

To display inline code, simply use <code> tag element in your HTML. Use <pre> tag element in your HTML for multiline code.

NOTE that you must remember to replace < and > with &#x3C; and &#x3E; or it will rendered as HTML

Example

Code tag

<script>alert("Hello World");</script> 
<code>&#x3C;script&#x3E;alert("Hello World");&#x3C;/script&#x3E;</code>

Pre tag

<!-- Fire UI has not released yet -->                
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Fire UI CSS -->
    <link rel="stylesheet" type="text/css" href="">
    <!-- Fire UI Javascript -->
    <script src=""></script>
    <title>Hello, world!</title>
</head>
<body>
    <h1>Hello, world!</h1>
</body>
</html>
<pre>
&#x3C;!-- Fire UI has not released yet --&#x3E;                
&#x3C;!DOCTYPE html&#x3E;
&#x3C;html lang=&#x22;en&#x22;&#x3E;
&#x3C;head&#x3E;
    &#x3C;!-- Required meta tags --&#x3E;
    &#x3C;meta charset=&#x22;utf-8&#x22;&#x3E;
    &#x3C;meta name=&#x22;viewport&#x22; content=&#x22;width=device-width, initial-scale=1&#x22;&#x3E;
    &#x3C;!-- Fire UI CSS --&#x3E;
    &#x3C;link rel=&#x22;stylesheet&#x22; type=&#x22;text/css&#x22; href=&#x22;&#x22;&#x3E;
    &#x3C;!-- Fire UI Javascript --&#x3E;
    &#x3C;script src=&#x22;&#x22;&#x3E;&#x3C;/script&#x3E;
    &#x3C;title&#x3E;Hello, world!&#x3C;/title&#x3E;
&#x3C;/head&#x3E;
&#x3C;body&#x3E;
    &#x3C;h1&#x3E;Hello, world!&#x3C;/h1&#x3E;
&#x3C;/body&#x3E;
&#x3C;/html&#x3E;
</pre>