21

21Displaying code fragmentse

21.4

Code fragments, some Worked examples

I use Google Prettify to display mainly HTML, CSS and JavaScript code, that is after all what goes into a website. This however, can be a bit of a problem.

I feel like I’ve been writing this section for ages. You would think there would be hundreds of websites that explained clearly how to do this sort of thing — buggered if I could find ’em though.

After all I’ve written on this subject, this is probably the most useful bit, I just show you how to do it. You get a screen shot, the HTML and a few words for each of the following:

  • HTML without numbers and no text wrapping (horizontal scrollbars)

  • HTML with numbers and text wrapping (no scrollbars)

  • HTML with false numbering and no text wrapping (horizontal scroll bar)

  • HTML with a fixed height fragment (vertical and horizontal scrolling)

  • CSS with numbers and no text wrapping

  • ANSI C

  • VB

  • HTML Simple single line code fragment

  • HTML Simple multi-line fragment

  • HTML Inline fragment

That should cover it.

21.4.1

HTML without numbers and no text wrapping

Appearance

code fragment html
<nav>                            <!-- TOP NAVIGATION BAR -->
    <div class="top-nav">
        <div class="rg-row">
            <a class="nav-wide" href="#"><span class="top-nav-icon">l</span><span class="top-nav-text">Prev. section</span></a>
            <a class="nav-wide" href="#"><span class="top-nav-icon">u</span><span class="top-nav-text">Prev. chapter</span></a>
            <a class="nav-wide nav-home" href="#"><span class="top-nav-text">Home</span><span class="top-nav-icon">h</span></a>
            <a class="nav-narrow js--sc-top" href="#"><span class="top-nav-icon">t</span><span class="top-nav-text">Top</span></a>
            <a class="nav-narrow" href="#"><span class="top-nav-text">Home</span><span class="top-nav-icon">h</span></a>
            <a class="nav-wide" href="#"><span class="top-nav-text">Next chapter</span><span class="top-nav-icon">d</span></a>
            <a class="nav-wide" href="#"><span class="top-nav-text">Next section</span><span class="top-nav-icon">r</span></a>
        </div>
    </div>
</nav>                            <!-- END OF TOP NAVIGATION -->
Code xx.yy   Caption

Options

Options
<pre class="prettyprint lang-html" id="js--cXX-YY">
Element Required Class Function
<pre> perttyprint Triggers the Google Prettify software
lang-html Sets the display language to HTML

Notes

The fragment will be as high as required (depends on content); if any line extends beyond the edge of the code-area container, a horizontal scrollbar will automatically appear.

HTML

HTML code fragment — no line numbers, no text wrap
<div class="code-extract">                          <!-- Start of code fragment -->
    <div class="code-header">filename.ext</div>     <!-- Code file name -->
    <div class="code-area">                         <!-- Start of code extract holder -->
        <pre class="prettyprint lang-html" id="js--cXX-YY">
&lt;nav&gt;                            &lt;!-- TOP NAVIGATION BAR --&gt;
    &lt;div class="top-nav"&gt;
        &lt;div class="rg-row"&gt;
            &lt;a class="nav-wide" href="#"&gt;&lt;span class="top-nav-icon"&gt;l&lt;/span&gt;&lt;span class="top-nav-text"&gt;Prev. section&lt;/span&gt;&lt;/a&gt;
            &lt;a class="nav-wide" href="#"&gt;&lt;span class="top-nav-icon"&gt;u&lt;/span&gt;&lt;span class="top-nav-text"&gt;Prev. chapter&lt;/span&gt;&lt;/a&gt;
            &lt;a class="nav-wide nav-home" href="#"&gt;&lt;span class="top-nav-text"&gt;Home&lt;/span&gt;&lt;span class="top-nav-icon"&gt;h&lt;/span&gt;&lt;/a&gt;
            &lt;a class="nav-narrow js--sc-top" href="#"&gt;&lt;span class="top-nav-icon"&gt;t&lt;/span&gt;&lt;span class="top-nav-text"&gt;Top&lt;/span&gt;&lt;/a&gt;
            &lt;a class="nav-narrow" href="#"&gt;&lt;span class="top-nav-text"&gt;Home&lt;/span&gt;&lt;span class="top-nav-icon"&gt;h&lt;/span&gt;&lt;/a&gt;
            &lt;a class="nav-wide" href="#"&gt;&lt;span class="top-nav-text"&gt;Next chapter&lt;/span&gt;&lt;span class="top-nav-icon"&gt;d&lt;/span&gt;&lt;/a&gt;
            &lt;a class="nav-wide" href="#"&gt;&lt;span class="top-nav-text"&gt;Next section&lt;/span&gt;&lt;span class="top-nav-icon"&gt;r&lt;/span&gt;&lt;/a&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/nav&gt;                            &lt;!-- END OF TOP NAVIGATION --&gt;
        </pre>
    </div>                                          <!-- End of code extract holder -->
    <div class="code-caption">Code xx.yy &emsp; Caption</div>  <!-- Code caption -->
</div>                                              <!-- End of code fragment -->
Code 21.6   HTML code fragment — no line numbers, no text wrap

21.4.2

HTML with numbers and text wrapping

Appearance

code fragment html
<nav>                            <!-- TOP NAVIGATION BAR -->
    <div class="top-nav">
        <div class="rg-row">
<a class="nav-wide" href="#"><span class="top-nav-icon">l</span><span class="top-nav-text">Prev. section</span></a>
<a class="nav-wide" href="#"><span class="top-nav-icon">u</span><span class="top-nav-text">Prev. chapter</span></a>
<a class="nav-wide nav-home" href="#"><span class="top-nav-text">Home</span><span class="top-nav-icon">h</span></a>
<a class="nav-narrow js--sc-top" href="#"><span class="top-nav-icon">t</span><span class="top-nav-text">Top</span></a>
<a class="nav-narrow" href="#"><span class="top-nav-text">Home</span><span class="top-nav-icon">h</span></a>
<a class="nav-wide" href="#"><span class="top-nav-text">Next chapter</span><span class="top-nav-icon">d</span></a>
<a class="nav-wide" href="#"><span class="top-nav-text">Next section</span><span class="top-nav-icon">r</span></a>
        </div>
    </div>
</nav>                            <!-- END OF TOP NAVIGATION -->
Code xx.yy   Caption

Options

Options
<pre class="prettyprint linenums wrap lang-html" id="js--cXX-YY">
Element Required Class Function
<pre> perttyprint Triggers the Google Prettify software
linenums Activates automatic line numbering (starts at 1)
wrap Turns on text wrapping
lang-html Sets the display language to HTML

Notes

The fragment will be as high as required (depends on content); if any line extends beyond the edge of the code-area container, a horizontal scrollbar will automatically appear.

HTML

HTML code fragment — line numbers and text wrap
<div class="code-extract">                          <!-- Start of code fragment -->
    <div class="code-header">filename.ext</div>     <!-- Code file name -->
    <div class="code-area">                         <!-- Start of code extract holder -->
       <pre class="prettyprint linenums wrap lang-html" id="js--cXX-YY">
&lt;nav&gt;                            &lt;!-- TOP NAVIGATION BAR --&gt;
    &lt;div class="top-nav"&gt;
        &lt;div class="rg-row"&gt;
&lt;a class="nav-wide" href="#"&gt;&lt;span class="top-nav-icon"&gt;l&lt;/span&gt;&lt;span class="top-nav-text"&gt;Prev. section&lt;/span&gt;&lt;/a&gt;
&lt;a class="nav-wide" href="#"&gt;&lt;span class="top-nav-icon"&gt;u&lt;/span&gt;&lt;span class="top-nav-text"&gt;Prev. chapter&lt;/span&gt;&lt;/a&gt;
&lt;a class="nav-wide nav-home" href="#"&gt;&lt;span class="top-nav-text"&gt;Home&lt;/span&gt;&lt;span class="top-nav-icon"&gt;h&lt;/span&gt;&lt;/a&gt;
&lt;a class="nav-narrow js--sc-top" href="#"&gt;&lt;span class="top-nav-icon"&gt;t&lt;/span&gt;&lt;span class="top-nav-text"&gt;Top&lt;/span&gt;&lt;/a&gt;
&lt;a class="nav-narrow" href="#"&gt;&lt;span class="top-nav-text"&gt;Home&lt;/span&gt;&lt;span class="top-nav-icon"&gt;h&lt;/span&gt;&lt;/a&gt;
&lt;a class="nav-wide" href="#"&gt;&lt;span class="top-nav-text"&gt;Next chapter&lt;/span&gt;&lt;span class="top-nav-icon"&gt;d&lt;/span&gt;&lt;/a&gt;
&lt;a class="nav-wide" href="#"&gt;&lt;span class="top-nav-text"&gt;Next section&lt;/span&gt;&lt;span class="top-nav-icon"&gt;r&lt;/span&gt;&lt;/a&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/nav&gt;                            &lt;!-- END OF TOP NAVIGATION --&gt;
        </pre>
    </div>                                          <!-- End of code extract holder -->
    <div class="code-caption">Code xx.yy &emsp; Caption</div>  <!-- Code caption -->
</div>                                              <!-- End of code fragment -->
Code 21.7   HTML code fragment — line numbers and text wrap

Special requirements

The fragment will be as high as required (depends on content); if any line extends beyond the edge of the code-area container, a horizontal scrollbar will automatically appear.

21.4.3

HTML with false line numbers and no text wrapping

Appearance

code fragment html
<nav>                            <!-- TOP NAVIGATION BAR -->
    <div class="top-nav">
        <div class="rg-row">
            <a class="nav-wide" href="#"><span class="top-nav-icon">l</span><span class="top-nav-text">Prev. section</span></a>
            <a class="nav-wide" href="#"><span class="top-nav-icon">u</span><span class="top-nav-text">Prev. chapter</span></a>
            <a class="nav-wide nav-home" href="#"><span class="top-nav-text">Home</span><span class="top-nav-icon">h</span></a>
            <a class="nav-narrow js--sc-top" href="#"><span class="top-nav-icon">t</span><span class="top-nav-text">Top</span></a>
            <a class="nav-narrow" href="#"><span class="top-nav-text">Home</span><span class="top-nav-icon">h</span></a>
            <a class="nav-wide" href="#"><span class="top-nav-text">Next chapter</span><span class="top-nav-icon">d</span></a>
            <a class="nav-wide" href="#"><span class="top-nav-text">Next section</span><span class="top-nav-icon">r</span></a>
        </div>
    </div>
</nav>                            <!-- END OF TOP NAVIGATION -->
Code xx.yy   Caption

Options

Options
<pre class="prettyprint linenums:287 lang-html" id="js--cXX-YY">
Element Required Class Function
<pre> perttyprint Triggers the Google Prettify software
linenums:nn Starts line numbering at the value nn, 287 in example
lang-html Sets the display language to HTML

Notes

The fragment will be as high as required (depends on content); if any line extends beyond the edge of the code-area container, a horizontal scrollbar will automatically appear.

HTML

HTML code fragment — false line numbers and no text wrap
<div class="code-extract">                          <!-- Start of code fragment -->
    <div class="code-header">filename.ext</div>     <!-- Code file name -->
    <div class="code-area">                         <!-- Start of code extract holder -->
       <pre class="prettyprint linenums:287 lang-html" id="js--cXX-YY">
&lt;nav&gt;                            &lt;!-- TOP NAVIGATION BAR --&gt;
    &lt;div class="top-nav"&gt;
        &lt;div class="rg-row"&gt;
            &lt;a class="nav-wide" href="#"&gt;&lt;span class="top-nav-icon"&gt;l&lt;/span&gt;&lt;span class="top-nav-text"&gt;Prev. section&lt;/span&gt;&lt;/a&gt;
            &lt;a class="nav-wide" href="#"&gt;&lt;span class="top-nav-icon"&gt;u&lt;/span&gt;&lt;span class="top-nav-text"&gt;Prev. chapter&lt;/span&gt;&lt;/a&gt;
            &lt;a class="nav-wide nav-home" href="#"&gt;&lt;span class="top-nav-text"&gt;Home&lt;/span&gt;&lt;span class="top-nav-icon"&gt;h&lt;/span&gt;&lt;/a&gt;
            &lt;a class="nav-narrow js--sc-top" href="#"&gt;&lt;span class="top-nav-icon"&gt;t&lt;/span&gt;&lt;span class="top-nav-text"&gt;Top&lt;/span&gt;&lt;/a&gt;
            &lt;a class="nav-narrow" href="#"&gt;&lt;span class="top-nav-text"&gt;Home&lt;/span&gt;&lt;span class="top-nav-icon"&gt;h&lt;/span&gt;&lt;/a&gt;
            &lt;a class="nav-wide" href="#"&gt;&lt;span class="top-nav-text"&gt;Next chapter&lt;/span&gt;&lt;span class="top-nav-icon"&gt;d&lt;/span&gt;&lt;/a&gt;
            &lt;a class="nav-wide" href="#"&gt;&lt;span class="top-nav-text"&gt;Next section&lt;/span&gt;&lt;span class="top-nav-icon"&gt;r&lt;/span&gt;&lt;/a&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/nav&gt;                            &lt;!-- END OF TOP NAVIGATION --&gt;
        </pre>
    </div>                                          <!-- End of code extract holder -->
    <div class="code-caption">Code xx.yy &emsp; Caption</div>  <!-- Code caption -->
</div>                                              <!-- End of code fragment -->
Code 21.8   HTML code fragment — false line numbers and no text wrap

Special requirements

The fragment will be as high as required (depends on content); if any line extends beyond the edge of the code-area container, a horizontal scrollbar will automatically appear.

21.4.4

HTML with a fixed height fragment (no text wrapping)

Appearance

code fragment html
<nav>                            <!-- TOP NAVIGATION BAR -->
    <div class="top-nav">
        <div class="rg-row">
            <a class="nav-wide" href="#"><span class="top-nav-icon">l</span><span class="top-nav-text">Prev. section</span></a>
            <a class="nav-wide" href="#"><span class="top-nav-icon">u</span><span class="top-nav-text">Prev. chapter</span></a>
            <a class="nav-wide nav-home" href="#"><span class="top-nav-text">Home</span><span class="top-nav-icon">h</span></a>
            <a class="nav-narrow js--sc-top" href="#"><span class="top-nav-icon">t</span><span class="top-nav-text">Top</span></a>
            <a class="nav-narrow" href="#"><span class="top-nav-text">Home</span><span class="top-nav-icon">h</span></a>
            <a class="nav-wide" href="#"><span class="top-nav-text">Next chapter</span><span class="top-nav-icon">d</span></a>
            <a class="nav-wide" href="#"><span class="top-nav-text">Next section</span><span class="top-nav-icon">r</span></a>
        </div>
    </div>
</nav>                            <!-- END OF TOP NAVIGATION -->
Code xx.yy — CodeCaption

Options

Options
<pre class="prettyprint linenums lang-html" id="js--cXX-YY" style="max-height: 5.3rem">
Element Required Class Function
<pre> perttyprint Triggers the Google Prettify software
linenums Activates automatic line numbering (starts at 1)
lang-html Sets the display language to HTML
style="max-height: 5.3rem" A style attribute must be applied to <pre> specifying the height of the fragment (e.g. 5.3rems)

Notes

The fragment height will be limited to the max-height setting in the style attribute. Both horizontal and vertical scrollbars will be applied as required.

HTML

HTML code fragment — fixed height fragment
<div class="code-extract">                          <!-- Start of code fragment -->
    <div class="code-header">filename.ext</div>     <!-- Code file name -->
    <div class="code-area">                         <!-- Start of code extract holder -->
        <pre class="prettyprint linenums lang-html" id="js--cXX-YY" style="max-height: 5.3rem">
&lt;nav&gt;                            &lt;!-- TOP NAVIGATION BAR --&gt;
    &lt;div class="top-nav"&gt;
        &lt;div class="rg-row"&gt;
            &lt;a class="nav-wide" href="#"&gt;&lt;span class="top-nav-icon"&gt;l&lt;/span&gt;&lt;span class="top-nav-text"&gt;Prev. section&lt;/span&gt;&lt;/a&gt;
            &lt;a class="nav-wide" href="#"&gt;&lt;span class="top-nav-icon"&gt;u&lt;/span&gt;&lt;span class="top-nav-text"&gt;Prev. chapter&lt;/span&gt;&lt;/a&gt;
            &lt;a class="nav-wide nav-home" href="#"&gt;&lt;span class="top-nav-text"&gt;Home&lt;/span&gt;&lt;span class="top-nav-icon"&gt;h&lt;/span&gt;&lt;/a&gt;
            &lt;a class="nav-narrow js--sc-top" href="#"&gt;&lt;span class="top-nav-icon"&gt;t&lt;/span&gt;&lt;span class="top-nav-text"&gt;Top&lt;/span&gt;&lt;/a&gt;
            &lt;a class="nav-narrow" href="#"&gt;&lt;span class="top-nav-text"&gt;Home&lt;/span&gt;&lt;span class="top-nav-icon"&gt;h&lt;/span&gt;&lt;/a&gt;
            &lt;a class="nav-wide" href="#"&gt;&lt;span class="top-nav-text"&gt;Next chapter&lt;/span&gt;&lt;span class="top-nav-icon"&gt;d&lt;/span&gt;&lt;/a&gt;
            &lt;a class="nav-wide" href="#"&gt;&lt;span class="top-nav-text"&gt;Next section&lt;/span&gt;&lt;span class="top-nav-icon"&gt;r&lt;/span&gt;&lt;/a&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/nav&gt;                            &lt;!-- END OF TOP NAVIGATION --&gt;
        </pre>
    </div>                                          <!-- End of code extract holder -->
    <div class="code-caption">Code xx.yy &emsp; Caption</div>  <!-- Code caption -->
</div>                                              <!-- End of code fragment -->
Code 21.9   HTML code fragment — fixed height fragment

21.4.5

CSS with numbers and no text wrapping

Appearance

code fragment css
.list-num {                     /* TEXT STYLE - Numbered list */
    font-family: "conc-i3-r";
    margin-left: 5rem;
    /* font-feature-settings: 'liga' 1, 'ss01' 0; */
}
.list-num li p {
    font-family: "eqty-ta-r";
    padding-left: 1rem;
    margin-bottom: 0.85rem;
}
Code xx.yy — CodeCaption

Options

Options
<script src="21-global/05-js/run_prettify.js?autoload=true&lang=css"></script><pre class="prettyprint linenums lang-css" id="js--cXX-YY">
Element Required Class Function
<pre> perttyprint Triggers the Google Prettify software
linenums Activates automatic line numbering (starts at 1)
lang-css Sets the display language to CSS
<sript> &lang=css &lang=css must be added to load the CSS file.

Notes

The fragment will be as high as required (depends on content); if any line extends beyond the edge of the code-area container, a horizontal scrollbar will automatically appear.

HTML

CSS code fragment — line numbers and no text wrap
<div class="code-extract">                          <!-- Start of code fragment -->
    <div class="code-header">filename.ext</div>     <!-- Code file name -->
    <div class="code-area">                         <!-- Start of code extract holder -->
        <pre class="prettyprint linenums lang-css" id="js--cXX-YY">
.list-num {                     /* TEXT STYLE - Numbered list */
    font-family: "conc-i3-r";
    margin-left: 5rem;
    /* font-feature-settings: 'liga' 1, 'ss01' 0; */
}
.list-num li p {
    font-family: "eqty-ta-r";
    padding-left: 1rem;
    margin-bottom: 0.85rem;
}       </pre>
    </div>                                          <!-- End of code extract holder -->
    <div class="code-caption">Code xx.yy &emsp; Caption</div>  <!-- Code caption -->
</div>                                              <!-- End of code fragment -->
Code 21.10   CSS code fragment — line numbers and no text wrap

21.4.6

ANSI C with numbers and no text wrapping

Appearance

code fragment ANSI C
#include <stdio.h>
int main() {
    char c;
    printf("Enter a character: ");

    // Reads character input from the user
    scanf("%c", &c);

    // %d displays the integer value of a character
    // %c displays the actual character
    printf("ASCII value of %c = %d", c, c);
    return 0;
}
Code xx.yy — CodeCaption

Options

Options
<pre class="prettyprint linenums lang-c" id="js--cXX-YY">
Element Required Class Function
<pre> perttyprint Triggers the Google Prettify software
linenums Activates automatic line numbering (starts at 1)
lang-c Sets the display language to C (all varieties)

Notes

The fragment will be as high as required (depends on content); if any line extends beyond the edge of the code-area container, a horizontal scrollbar will automatically appear.

HTML

ANSI C code fragment — line numbers and no text wrap
<div class="code-extract">                          <!-- Start of code fragment -->
    <div class="code-header">filename.ext</div>     <!-- Code file name -->
    <div class="code-area">                         <!-- Start of code extract holder -->
        <pre class="prettyprint linenums lang-c" id="js--cXX-YY">
#include &lt;stdio.h&gt;
int main() {
    char c;
    printf("Enter a character: ");


    // Reads character input from the user
    scanf("%c", &amp;c);


    // %d displays the integer value of a character
    // %c displays the actual character
    printf("ASCII value of %c = %d", c, c);
    return 0;
}
       </pre>
    </div>                                          <!-- End of code extract holder -->
    <div class="code-caption">Code xx.yy &emsp; Caption</div>  <!-- Code caption -->
</div>                                              <!-- End of code fragment -->
Code 21.11   ANSI C code fragment — line numbers and no text wrap

21.4.7

Visual Basic with numbers and no text wrapping

Appearance

code fragment visual basic (VB)
Sub Main()

On Error GoTo Failed

Dim app As Netica.Application
app = New Netica.Application
app.Visible = True

Dim net_file_name As String
net_file_name = System.AppDomain.CurrentDomain.BaseDirectory() & "..\..\..\ChestClinic.dne"
Dim net As Netica.Bnet
net = app.ReadBNet(app.NewStream(net_file_name))
net.Compile()

Dim TB As Netica.BNode
TB = net.Nodes.Item("Tuberculosis")
Dim belief As Double
belief = TB.GetBelief("present")
MsgBox("The probability of tuberculosis is " & belief)

End Sub
Code xx.yy — CodeCaption

Options

Options
<script src="21-global/05-js/run_prettify.js?autoload=true&lang=vb"></script><pre class="prettyprint linenums lang-css" id="js--cXX-YY">
Element Required Class Function
<pre> perttyprint Triggers the Google Prettify software
linenums Activates automatic line numbering (starts at 1)
lang-vb Sets the display language to VB
<sript> &lang=vb &lang=vb must be added to load the vb file.

Notes

The fragment will be as high as required (depends on content); if any line extends beyond the edge of the code-area container, a horizontal scrollbar will automatically appear.

HTML

VB code fragment — line numbers and no text wrap
<div class="code-extract">                          <!-- Start of code fragment -->
    <div class="code-header">filename.ext</div>     <!-- Code file name -->
    <div class="code-area">                         <!-- Start of code extract holder -->
        <pre class="prettyprint linenums lang-vb" id="js--cXX-YY">
Sub Main()

On Error GoTo Failed

Dim app As Netica.Application
app = New Netica.Application
app.Visible = True

Dim TB As Netica.BNode
TB = net.Nodes.Item("Tuberculosis")
Dim belief As Double
belief = TB.GetBelief("present")
MsgBox("The probability of tuberculosis is " & belief)

End Sub
        </pre>
    </div>                                          <!-- End of code extract holder -->
    <div class="code-caption">Code xx.yy &emsp; Caption</div>  <!-- Code caption -->
</div>                                              <!-- End of code fragment -->
Code 21.12   VB code fragment — line numbers and no text wrap

21.4.8

Simple code fragment
single line

Appearance

<div class="top-nav"></div>
<div class="top-nav"></div>
<div class="top-nav"></div>

Options

Options
<pre class="prettyprint lang-html">
Element Required Class Function
<pre> perttyprint Triggers the Google Prettify software
lang-html Sets the display language to HTML

Notes

The code-header and code-caption div elements are not required for simple code fragments.

HTML

Simple code fragment — single line
<div class="code-extract">                          <!-- Start of code fragment -->
    <div class="code-area">                         <!-- Start of code extract holder -->
        <pre class="prettyprint lang-html">&lt;div class="top-nav"&gt;&lt;/div&gt;</pre>
    </div>                                          <!-- End of code extract holder -->
</div>                                              <!-- End of code fragment -->
Code 21.13   Simple code fragment — single line

21.4.9

Simple code fragment
multiple lines

Appearance

<div class="top-nav"></div>

Options

Options
<pre class="prettyprint lang-html">
Element Required Class Function
<pre> perttyprint Triggers the Google Prettify software
lang-html Sets the display language to HTML

Notes

The code-header and code-caption div elements are not required for simple code fragments.

HTML

Simple code fragment — multiple lines
<div class="code-extract">                          <!-- Start of code fragment -->
    <div class="code-area">                         <!-- Start of code extract holder -->
        <pre class="prettyprint lang-html">&lt;div class="top-nav"&gt;&lt;/div&gt;
&lt;div class="top-nav"&gt;&lt;/div&gt;
&lt;div class="top-nav"&gt;&lt;/div&gt;</pre>
    </div>                                          <!-- End of code extract holder -->
</div>                                              <!-- End of code fragment -->
Code 21.14   Simple code fragment — multiple lines

21.4.10

Inline code fragment

Appearance

An inline fragment: <div class="top-nav"></div> it fits within the paragraph text.

Options

Options
<code class="prettyprint lang-html">
Element Required Class Function
<code> perttyprint Triggers the Google Prettify software
lang-html Sets the display language to HTML

Notes

Inline fragments use the <code> element in place of the <pre> element.

The code-header and code-caption div elements are not required for inline code fragments.

HTML

Inline code fragment
<p class="hyp">This is inline fragment: <code class="prettyprint lang-html">&lt;div class="top-nav"&gt;&lt;/div&gt;</code>, it fits within the paragraph text.</p>
Code 21.15   Inline code fragment



End flourish image