Components - Code Containers

Code container with default syntax highlight

Code Container boxes

Code Box: Simple Code Container boxes

Just a simple code container with a box. With required margins , padding and default code highlight as well.

Javascript, css and other codes can be as is. No conversion needed.

HTML codes to Entities

For HTML code, have the html tags converted to html entities. Java script and CSS codes could be written as is.

Convert html codes to html entities

< (less than sign) becomes < or <
> (greater than sign) becomes > or >
& (ampersand sign) becomes & or &
" (double quote sign) becomes " or "
' (apostrophe/single quote sign) becomes ' or '

Implementation Code and the output

<div class="code-box neon-copy-div">
  <pre>
    <code> 
            Sample Code Goes here
    </code>
  </pre>
  <i class="ph-bold ph-copy neon-copy-icon"></i>
<div class="neon-copy-tip">Copy</div>
</div>

Copy

Sample with the code included

<div class="code-box neon-copy-div">
  <pre>
    <code> 
            &lt;body class=&quot;neon-ui&quot;&gt;
              &lt;ol class="list-nums"&gt;
                  &lt;li&gt;list-topics: Open the terminal&lt;/li&gt;
                  &lt;li&gt;list-topics: Enter the following command&lt;/li&gt;
                  &lt;li&gt;list-topics: Close the terminal&lt;/li&gt;
                  &lt;li&gt;list-topics: Close the system&lt;/li&gt;
              &lt;/ol&gt;
            &lt;/body&gt;
    </code>
  </pre>
  <i class="ph-bold ph-copy neon-copy-icon"></i>
<div class="neon-copy-tip">Copy</div>
</div>

Output Sample

<body class="neon-ui">
      <ol class="list-nums">
        <li>list-topics: Open the terminal</li>
        <li>list-topics: Enter the following command</li>
        <li>list-topics: Close the terminal</li>
        <li>list-topics: Close the system</li>
      </ol>
  </body>

Copy

Code Box: another simple example

Implementation Code and the output

<div class="code-box neon-copy-div">
  
  <pre><code>code-box: https://www.w3webd.com/dist/css/neon-ui-v1.0-min.css</code></pre>
  
  <i class="ph-bold ph-copy neon-copy-icon"></i>
  <div class="neon-copy-tip">Copy</div>
</div>

Copy

Code Box: Javascript Example

Sample with the code included

<div class="code-box neon-copy-div">
  <pre>
    <code> 
            function addClickEventCopyTips() {
              let copyIcons = selectAllElements(".neon-copy-icon");
              if (copyIcons.length > 0) {
              addEventsForArrayOfElements(copyIcons, "click", copyIconClicked);
            }
    </code>
  </pre>
  <i class="ph-bold ph-copy neon-copy-icon"></i>
<div class="neon-copy-tip">Copy</div>
</div>

Output Sample

function addClickEventCopyTips() {
    let copyIcons = selectAllElements(".neon-copy-icon");
    if (copyIcons.length > 0) {
      addEventsForArrayOfElements(copyIcons, "click", copyIconClicked);
  }
}

Copy

Code Box: CSS Example

Sample with the code included

<div class="code-box neon-copy-div">
  <pre>
    <code> 
        .sample-css-code {
            display: inline-flex;
            justify-content: center;
            align-items: center;
            
            gap: 0.25rem;
            
            width: fit-content;
            padding: 0.5rem;
            font-size: 12px;
            color: #444;
            background-color: #fff;
            /* margin: 0.23rem 0 0 0; */
            border-radius: 12px;
            border: solid 1px #ddd;
            
            -webkit-user-select: none;
            /* For older Safari and Chrome */
            -moz-user-select: none;
            /* For older Firefox */
            -ms-user-select: none;
            /* For Internet Explorer */
            user-select: none;
            /* Standard property */
        }
    </code>
  </pre>
  <i class="ph-bold ph-copy neon-copy-icon"></i>
<div class="neon-copy-tip">Copy</div>
</div>

Output Sample

.sample-css-code {
    display: inline-flex;
    justify-content: center;
    align-items: center;

    gap: 0.25rem;

    width: fit-content;
    padding: 0.5rem;
    font-size: 12px;
    color: #444;
    background-color: #fff;
    /* margin: 0.23rem 0 0 0; */
    border-radius: 12px;
    border: solid 1px #ddd;

    -webkit-user-select: none;
    /* For older Safari and Chrome */
    -moz-user-select: none;
    /* For older Firefox */
    -ms-user-select: none;
    /* For Internet Explorer */
    user-select: none;
    /* Standard property */
}

Copy

Components - Output Boxes

Components - Code (Link) Box