Whakerexa > Content > Code

Code

Inline code

Use <code> for short fragments of code or technical terms within a sentence. The element receives a distinct background color and monospace font automatically.

Call wexa.init() before any other method.

Set --font-size: 18px on :root to scale the entire layout.

<p>Call <code>wexa.init()</code> before any other method.</p>

Variables

Inline code appearance is controlled by the following variables:

Variable Role
--code-bg-color Background color of inline <code>
--font-family-mono Font family for code, kbd, samp, var, output
--font-family-pre Font family for pre

Code blocks

Use <pre> for multi-line code or preformatted text. Nest a <code> element inside for semantic markup. The block is scrollable when content overflows. A left border visually separates the block from surrounding text. 

function greet(name) {
    return "Hello, " + name + "!";
}

console.log(greet("Whakerexa"));
<pre><code>
function greet(name) {
    return "Hello, " + name + "!";
}
</code></pre>

A .dark class on the <pre> element forces dark background for code blocks regardless of the page theme — useful when a light page needs high-contrast code display. 

const answer = 42;
<pre class="dark"><code>const answer = 42;</code></pre>

Keyboard input

Use <kbd> to represent a key or combination of keys the user must press. It renders with a monospace font and a bottom border that evokes the physical depth of a key.

Press Ctrl + S to save.

Use Tab to navigate between fields.

Hold Shift + F10 to open the context menu.

<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save.</p>

Other semantic elements

Three additional elements carry semantic meaning for computer output and notation. All share the monospace font of <code>.

The program returned Error: file not found.

The variable x holds the current offset.

Result: 42

<samp>Error: file not found</samp>

<var>x</var>

<output>42</output>

Syntax highlighting

code.css is an optional extra stylesheet that provides custom colors for Python source code generated by Pygments. It styles the .highlight class and its token children, with a full dark-mode variant. Load it after wexa.css: 

<link rel="stylesheet" href=".../wexa_statics/css/wexa.css" media="all" />
<link rel="stylesheet" href=".../wexa_statics/css/code.css" media="all" />

The following examples were automatically generated with ClammingPy 1.7. 

def markdown(self) -> str:
    """Return the documentation of the package as a standalone Markdown content."""
  md = list()
  md.append('## Package `{:s}`\n'.format(self.__name))
  for clams in self.__clams:
      md.append(clams.markdown())
  md.append('\n\n~ Created using [Clamming](https://github.com/brigitte-bigi/ClammingPy) version {:s} ~\n'.format(clamming.__version__))
  return '\n'.join(md)

<pre class="highlight"><code>
    <!-- Pygments HTML output -->
</code></pre>

Use <details> and <summary> to let users show or hide a long code block on demand — useful for lengthy listings that would otherwise break the reading flow.

Show/Hide source code into a details/summary element 
                def __init__(self, parsed_obj: ClammingClassParser):
    """Create documentation from the given parsed class object.

    HTML conversion depends on external libraries. It could be disabled
    if any of them is missing. If not, customizing the HTML export can
    be done by assigning different values to members or by changing their
    optional parameters.

    See `Pygments` documentation:
    [HtmlFormatter](https://pygments.org/docs/formatters/#HtmlFormatter)
    and
    [Lexer](https://pygments.org/docs/lexers/#pygments.lexers.python.PythonLexer)

    :example:
    >>> self.markdowner = markdown2.Markdown()
    >>> self.formatter = pygments_formatter.HtmlFormatter(**ClamsClass.HTML_FORMATTER_ARGS)
    >>> self.lexer = pygments_lexers.PythonLexer()

    :param parsed_obj: A parsed object.

    """
  self.markdowner = None
  self.lexer = None
  self.formatter = None
  self.__set_html_members()
  self.__info_class_name = parsed_obj.obj_clams.name
  self.__info_class_description = parsed_obj.obj_clams
  self.__info_constructor = parsed_obj.init_clams
  self.__info_public_fcts = list()
  for fct_name in parsed_obj.fct_clams:
      if fct_name.startswith('_') is False:
          self.__info_public_fcts.append(parsed_obj.fct_clams[fct_name])
  self.__info_private_fcts = list()
  for fct_name in parsed_obj.fct_clams:
      if fct_name.startswith('_') is True and fct_name.startswith('__') is False:
          self.__info_private_fcts.append(parsed_obj.fct_clams[fct_name])
  self.__info_protected_fcts = list()
  for fct_name in parsed_obj.fct_clams:
      if fct_name.startswith('__') is True and fct_name.endswith('__') is False:
          self.__info_protected_fcts.append(parsed_obj.fct_clams[fct_name])
  self.__info_overloads = list()
  for fct_name in parsed_obj.fct_clams:
      if fct_name.startswith('__') is True and fct_name.endswith('__') is True:
          self.__info_overloads.append(parsed_obj.fct_clams[fct_name])