pp/test/InlineFormatting.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
  <meta charset="utf-8" />
  <meta name="generator" content="pandoc" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
  <title>InlineFormatting Test</title>
  <style>
      code{white-space: pre-wrap;}
      span.smallcaps{font-variant: small-caps;}
      span.underline{text-decoration: underline;}
      div.column{display: inline-block; vertical-align: top; width: 50%;}
  </style>
  <style>
a.sourceLine { display: inline-block; line-height: 1.25; }
a.sourceLine { pointer-events: none; color: inherit; text-decoration: inherit; }
a.sourceLine:empty { height: 1.2em; }
.sourceCode { overflow: visible; }
code.sourceCode { white-space: pre; position: relative; }
div.sourceCode { margin: 1em 0; }
pre.sourceCode { margin: 0; }
@media screen {
div.sourceCode { overflow: auto; }
}
@media print {
code.sourceCode { white-space: pre-wrap; }
a.sourceLine { text-indent: -1em; padding-left: 1em; }
}
pre.numberSource a.sourceLine
  { position: relative; left: -4em; }
pre.numberSource a.sourceLine::before
  { content: attr(title);
    position: relative; left: -1em; text-align: right; vertical-align: baseline;
    border: none; pointer-events: all; display: inline-block;
    -webkit-touch-callout: none; -webkit-user-select: none;
    -khtml-user-select: none; -moz-user-select: none;
    -ms-user-select: none; user-select: none;
    padding: 0 4px; width: 4em;
    color: #aaaaaa;
  }
pre.numberSource { margin-left: 3em; border-left: 1px solid #aaaaaa;  padding-left: 4px; }
div.sourceCode
  {  }
@media screen {
a.sourceLine::before { text-decoration: underline; }
}
code span.al { color: #ff0000; font-weight: bold; } /* Alert */
code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
code span.at { color: #7d9029; } /* Attribute */
code span.bn { color: #40a070; } /* BaseN */
code span.bu { } /* BuiltIn */
code span.cf { color: #007020; font-weight: bold; } /* ControlFlow */
code span.ch { color: #4070a0; } /* Char */
code span.cn { color: #880000; } /* Constant */
code span.co { color: #60a0b0; font-style: italic; } /* Comment */
code span.cv { color: #60a0b0; font-weight: bold; font-style: italic; } /* CommentVar */
code span.do { color: #ba2121; font-style: italic; } /* Documentation */
code span.dt { color: #902000; } /* DataType */
code span.dv { color: #40a070; } /* DecVal */
code span.er { color: #ff0000; font-weight: bold; } /* Error */
code span.ex { } /* Extension */
code span.fl { color: #40a070; } /* Float */
code span.fu { color: #06287e; } /* Function */
code span.im { } /* Import */
code span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Information */
code span.kw { color: #007020; font-weight: bold; } /* Keyword */
code span.op { color: #666666; } /* Operator */
code span.ot { color: #007020; } /* Other */
code span.pp { color: #bc7a00; } /* Preprocessor */
code span.sc { color: #4070a0; } /* SpecialChar */
code span.ss { color: #bb6688; } /* SpecialString */
code span.st { color: #4070a0; } /* String */
code span.va { color: #19177c; } /* Variable */
code span.vs { color: #4070a0; } /* VerbatimString */
code span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */
  </style>
  <link rel="stylesheet" href="github.css" />
  <!--[if lt IE 9]>
    <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
  <![endif]-->
</head>
<body>
<header id="title-block-header">
<h1 class="title">InlineFormatting PP-Macros Test</h1>
</header>
<p>This is a run test of the <strong>Inline Formatting</strong> pp-macros set.</p>
<h2 id="files-list">Files List</h2>
<ul>
<li>macros files:
<ul>
<li><a href="../macros/InlineFormatting.pp"><code>InlineFormatting.pp</code></a> — macros definition module.</li>
<li><a href="../macros/kbd_GitHub.css"><code>kbd_GitHub.css</code></a> — CSS style for keystrokes.</li>
</ul></li>
<li>extra files:
<ul>
<li><a href="./github.css"><code>github.css</code></a> — basic document CSS styling.</li>
</ul></li>
</ul>
<h2 id="macros-list">Macros list</h2>
<ul>
<li><code>!kbd( KEY1 )[( KEY2 )( KEY3 )( KEY4 )]</code> — keystrokes in <code>&lt;kbd&gt;</code> tags.</li>
<li><code>!kbdInlineCSS</code> — Inject required CSS (“<code>kbd_GitHub.css</code>”)</li>
</ul>
<h1 id="keystrokes-kbd">Keystrokes (<code>&lt;kbd&gt;</code>)</h1>
<p>The <code>!kbd</code> macro is a fast way to represent up to four Keystrokes. It has the following syntax:</p>
<pre><code>!kbd( KEY1 )[( KEY2 )( KEY3 )( KEY4 )]</code></pre>
<p>… where only the first parameter is mandatory.</p>
<p>Example:</p>
<p><kbd>KEY1</kbd>+<kbd>KEY2</kbd>+<kbd>KEY3</kbd>+<kbd>KEY4</kbd></p>
<h2 id="keystrokes-css">Keystrokes CSS</h2>
<p>We need a custom CSS definition for viewing Keystrokes properly. We’ll use the <code>!kbdInlineCSS</code> macro to inject the contents of <code>kbd_GitHub.css</code> as inline stylesheet:</p>
<pre><code>!kbdInlineCSS</code></pre>
<p>this macro emits the following raw html:</p>
<div class="sourceCode" id="cb3"><pre class="sourceCode html"><code class="sourceCode html"><a class="sourceLine" id="cb3-1" title="1"><span class="kw">&lt;style</span><span class="ot"> type=</span><span class="st">&quot;text/css&quot;</span><span class="kw">&gt;</span></a>
<a class="sourceLine" id="cb3-2" title="2"><span class="co">/*  ==============================================================================</span></a>
<a class="sourceLine" id="cb3-3" title="3"><span class="co">    Adapted from &quot;GitHub Markdown CSS&quot; (c) Sindre Sorhus, MIT License (MIT):</span></a>
<a class="sourceLine" id="cb3-4" title="4"><span class="co">    -- https://github.com/sindresorhus/github-markdown-css</span></a>
<a class="sourceLine" id="cb3-5" title="5"><span class="co">    ============================================================================== */</span></a>
<a class="sourceLine" id="cb3-6" title="6">kbd {</a>
<a class="sourceLine" id="cb3-7" title="7">  <span class="kw">display</span>: <span class="dv">inline-block</span><span class="op">;</span></a>
<a class="sourceLine" id="cb3-8" title="8">  <span class="kw">padding</span>: <span class="dv">3</span><span class="dt">px</span> <span class="dv">5</span><span class="dt">px</span><span class="op">;</span></a>
<a class="sourceLine" id="cb3-9" title="9">  <span class="kw">font-family</span>: <span class="dv">monospace</span><span class="op">,</span> <span class="dv">monospace</span><span class="op">;</span></a>
<a class="sourceLine" id="cb3-10" title="10">  <span class="kw">font-size</span>: <span class="dv">11</span><span class="dt">px</span><span class="op">;</span> </a>
<a class="sourceLine" id="cb3-11" title="11">  <span class="kw">line-height</span>: <span class="dv">10</span><span class="dt">px</span><span class="op">;</span></a>
<a class="sourceLine" id="cb3-12" title="12">  <span class="kw">color</span>: <span class="cn">#444d56</span><span class="op">;</span></a>
<a class="sourceLine" id="cb3-13" title="13">  <span class="kw">vertical-align</span>: <span class="dv">middle</span><span class="op">;</span></a>
<a class="sourceLine" id="cb3-14" title="14">  <span class="kw">background-color</span>: <span class="cn">#fafbfc</span><span class="op">;</span></a>
<a class="sourceLine" id="cb3-15" title="15">  <span class="kw">border</span>: <span class="dv">solid</span> <span class="dv">1</span><span class="dt">px</span> <span class="cn">#c6cbd1</span><span class="op">;</span></a>
<a class="sourceLine" id="cb3-16" title="16">  <span class="kw">border-bottom-color</span>: <span class="cn">#959da5</span><span class="op">;</span></a>
<a class="sourceLine" id="cb3-17" title="17">  <span class="kw">border-radius</span>: <span class="dv">3</span><span class="dt">px</span><span class="op">;</span></a>
<a class="sourceLine" id="cb3-18" title="18">  <span class="kw">box-shadow</span>: <span class="dv">inset</span> <span class="dv">0</span> <span class="dv">-1</span><span class="dt">px</span> <span class="dv">0</span> <span class="cn">#959da5</span><span class="op">;</span></a>
<a class="sourceLine" id="cb3-19" title="19">}</a>
<a class="sourceLine" id="cb3-20" title="20"><span class="kw">&lt;/style&gt;</span></a></code></pre></div>
<style type="text/css">
/*  ==============================================================================
    Adapted from "GitHub Markdown CSS" (c) Sindre Sorhus, MIT License (MIT):
    -- https://github.com/sindresorhus/github-markdown-css
    ============================================================================== */
kbd {
  display: inline-block;
  padding: 3px 5px;
  font-family: monospace, monospace;
  font-size: 11px; 
  line-height: 10px;
  color: #444d56;
  vertical-align: middle;
  background-color: #fafbfc;
  border: solid 1px #c6cbd1;
  border-bottom-color: #959da5;
  border-radius: 3px;
  box-shadow: inset 0 -1px 0 #959da5;
}
</style>
<p>Now the CSS definition is available document-wide and you’ll see it aplied to the Keystroke examples herein.</p>
<p>Of course, you can use your own CSS definitions instead of the one produced by the <code>!kbdInlineCSS</code> macro. This macro is just a convenient quick solution.</p>
<h2 id="single-key">Single Key</h2>
<p>macro used:</p>
<pre><code>!kbd(CANC)</code></pre>
<p>raw html output:</p>
<div class="sourceCode" id="cb5"><pre class="sourceCode html"><code class="sourceCode html"><a class="sourceLine" id="cb5-1" title="1"><span class="kw">&lt;kbd&gt;</span>CANC<span class="kw">&lt;/kbd&gt;</span></a></code></pre></div>
<p>result preview:</p>
<p><kbd>CANC</kbd></p>
<h2 id="two-keys">Two Keys</h2>
<p>macro used:</p>
<pre><code>!kbd(Ctr)(Z)</code></pre>
<p>raw html output:</p>
<div class="sourceCode" id="cb7"><pre class="sourceCode html"><code class="sourceCode html"><a class="sourceLine" id="cb7-1" title="1"><span class="kw">&lt;kbd&gt;</span>Ctr<span class="kw">&lt;/kbd&gt;</span>+<span class="kw">&lt;kbd&gt;</span>Z<span class="kw">&lt;/kbd&gt;</span></a></code></pre></div>
<p>result preview:</p>
<p><kbd>Ctr</kbd>+<kbd>Z</kbd></p>
<h2 id="three-keys">Three Keys</h2>
<p>macro used:</p>
<pre><code>!kbd(Ctr)(SHIFT)(S)</code></pre>
<p>raw html output:</p>
<div class="sourceCode" id="cb9"><pre class="sourceCode html"><code class="sourceCode html"><a class="sourceLine" id="cb9-1" title="1"><span class="kw">&lt;kbd&gt;</span>Ctr<span class="kw">&lt;/kbd&gt;</span>+<span class="kw">&lt;kbd&gt;</span>SHIFT<span class="kw">&lt;/kbd&gt;</span>+<span class="kw">&lt;kbd&gt;</span>S<span class="kw">&lt;/kbd&gt;</span></a></code></pre></div>
<p>result preview:</p>
<p><kbd>Ctr</kbd>+<kbd>SHIFT</kbd>+<kbd>S</kbd></p>
<h2 id="four-keys">Four Keys</h2>
<p>macro used:</p>
<pre><code>!kbd(Ctrl)(SHIFT)(Alt-GR)(j)</code></pre>
<p>raw html output:</p>
<div class="sourceCode" id="cb11"><pre class="sourceCode html"><code class="sourceCode html"><a class="sourceLine" id="cb11-1" title="1"><span class="kw">&lt;kbd&gt;</span>Ctrl<span class="kw">&lt;/kbd&gt;</span>+<span class="kw">&lt;kbd&gt;</span>SHIFT<span class="kw">&lt;/kbd&gt;</span>+<span class="kw">&lt;kbd&gt;</span>Alt-GR<span class="kw">&lt;/kbd&gt;</span>+<span class="kw">&lt;kbd&gt;</span>j<span class="kw">&lt;/kbd&gt;</span></a></code></pre></div>
<p>result preview:</p>
<p><kbd>Ctrl</kbd>+<kbd>SHIFT</kbd>+<kbd>Alt-GR</kbd>+<kbd>j</kbd></p>
</body>
</html>