Welcome to little lamb

Code » qmdoc » commit 4b0a783

Some highlights, lists, and code blocks

author Olivier Brunel
2022-12-23 14:25:08 UTC
committer Olivier Brunel
2022-12-23 14:25:08 UTC
parent 45f9609be25650cbc32b6f80f77ad9e9befcbda3

Some highlights, lists, and code blocks

base.htm +87 -5

diff --git a/base.htm b/base.htm
index a310eb4..4a1ed55 100644
--- a/base.htm
+++ b/base.htm
@@ -116,13 +116,34 @@ main .highlight {
 main .highlight2 {
     color: red;
 }
+main .highlighted {
+    background: #ff0;
+}
 main pre, main tt {
     font-family: Monaco,Consolas,Liberation Mono,Courier,monospace;
     white-space: pre;
 }
 main pre {
+    line-height: 16px;
     overflow: auto;
 }
+main pre.lineno {
+    line-height: 16px;
+    display: block;
+    padding: 0 4px;
+    margin-top: 12px;
+    opacity: 0.4;
+    text-align: right;
+    float: left;
+    white-space: pre;
+}
+main pre.code {
+    line-height: 16px;
+    padding: 0;
+    margin: 12px 12px 0px 2px;
+    background: url(data:type/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAgCAYAAADT5RIaAAAAFklEQVQI12NgYGDgZWJgYGCgDkFtAAAWnAAsyj4TxgAAAABJRU5ErkJggg==) 0 0 repeat;
+    overflow: hidden;
+}
 main h1 {
     text-transform: uppercase;
     padding-top: 23px;
@@ -162,6 +183,9 @@ main h6 {
 main blockquote {
     margin: 4px 23px 23px 42px;
 }
+main ul, main ol {
+    padding-left: 42px;
+}
 main footer {
     padding-top: 8px;
     text-align: center;
@@ -350,11 +374,11 @@ main footer {
                     <h2>Getting Started</h2>
                     <p>Alright let's <span class="highlight2">get started</span> then.</p>
                     <p>We can test block stuff :</p>
-                    <pre>
+<pre>
 This is a text.
 No formatting or anything there.
 Now we will have to test some very long line, to see how the overflow is handled and make sure it works as expected. That is, as we expect, i.e. things don't break and a nice little scrollbar is featured.
-                    </pre>
+</pre>
                 </section>
                 <section id="titles">
                     <h2>This is level 2</h2>
@@ -375,15 +399,73 @@ Now we will have to test some very long line, to see how the overflow is handled
                     </section>
                 </section>
             </section>
-            <section id="foo">
-                <h1>Foo</h1>
+            <section id="citations_needed">
+                <h1>Citations Needed</h1>
                 <p>Here's some <tt>typetext stuff</tt> after which will follow
                 no less than a quote :
                 <blockquote cite="https://source.lnk"><p>Here it is. I'm a
                     quote.<br>No really, I was said by someone, once.<br>I
                     swear.</p>
                     <cite>Someone. Once.</cite></blockquote>
-                Of course <q>everything has been said before</a> so, there.
+                Of course <q>everything has been said before</q> so, there.
+                <section id="lists">
+                    <h2>Lists...</h2>
+                    <p>It is now time, to make it a list. Or two. Maybe
+                    more.</p>
+                    <p>First we'll have unordered ones :</p><ul>
+                        <li>Item 1</li>
+                        <li>Item 2<ul>
+                            <li>Item 1b</li>
+                            <li>Item 1b</li>
+                            <li>Item 1c</li>
+                        </ul></li>
+                        <li>Item 3</li>
+                        <li>Item 4</li>
+                    </ul><p>And then ordered ones :<ol>
+                        <li>First one<ol>
+                            <li>One bis</li>
+                            <li>One ter</li>
+                        </ol></li>
+                        <li>Second one</li>
+                        <li>Third one</li>
+                    </ol></p>
+                </section>
+            </section>
+            <section id="highlights">
+                <h1>Highlights</h1>
+                <p>It might happen that you'd want to <strong>
+                    <span class="highlight">highlight something</span></strong>.
+                Right, but <span class="highlight2">more</span> than that, or
+                more <em>literally</em> than that.</p>
+                <p>Anyays, here is the <span class="highlighted"><em>real</em>
+                    highlighted effect</span>. And let's make it work in
+                <tt>pre</tt>/<tt>code</tt> blocks too (unlike the others) :
+<pre>
+This is a line.
+It continues here,
+but <span class="highlighted">watch out</span> for
+the highlight.
+Which, also, can <span class="highlighted">spawn
+multiple lines</span>. Yep.
+</pre></p>
+                <section id="code blocks">
+                    <h2>Code Blocks</h2>
+                    <p>Oh yeah, we might wanna have "code blocks". Those would
+                    be like <tt>pre</tt> one, only a bit more styled :
+<pre class="lineno">1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10</pre>
+<pre class="code">#include &lt;stdlib.h&gt;
+int main(int argc, char **argv)
+{
+    int nb = 8;
+
+    for(int i = nb; i &gt; 0; --i)
+        printf("%d... ", i);
+
+    printf("Hello <span class="highlighted">World</span>!\n");
+}</pre></p>
+                    <p>Looking good? And yes, the <tt>highlighted</tt> effect
+                    works in there too.</p>
+                </section>
             </section>
             <footer>
                 Copyright &copy; 2022 Author Name - All Rights Reserved