Differences

This shows you the differences between two versions of the page.

--- livedemos:templateargon:start [2020/11/13 12:08] – admin
+++ livedemos:templateargon:start [2020/11/13 12:17] (current) – [Demo CLI-Plugin:] admin
@@ Line 1: / Line 1: @@
 ====== Argon Template with CLI-Plugin and Custom CSS ======
+===== Demo CLI-Plugin: =====
 <cli>
-test
+user@host:~/somedir $ ls # List current directory
-test
+conf      lang         README        screen.gif  ui
+info.txt  manager.dat  renderer.php  syntax.php
+user@host:~/somedir $
 </cli>
+===== The Custom CSS: =====
+Inserted in the file ''userstyle.css''.
+<code>
+#dokuwiki__content pre.cli {
+  /* This changes the default style */
+  background-color: #000;
+  span.cli_prompt  { color: red }
+  span.cli_command { color: white }
+  span.cli_comment { color: grey }
+  span.cli_output  { color: yellow }
+  /* retro green and retro green with prompt in reverse video */
+  &.retro-green, div.retro-green {
+    background-color: #1e2e15;
+    span.cli_prompt  { color: #0bc81b }
+    span.cli_command { color: #8fe35f }
+    span.cli_comment { color: #69a845 }
+    span.cli_output  { color: #93eb60 }
+    &.reverse {
+      span.cli_prompt  { color: #1e2e15; background-color: #93eb60; font-weight: bold }
+    }
+  }
+  /* retro ochre and retro ochre with prompt in reverse video */
+  &.retro-ochre, div.retro-ochre {
+    background-color: #2b2514;
+    span.cli_prompt  { color: #ff8a11 }
+    span.cli_command { color: #ffbf0e }
+    span.cli_comment { color: #a87f0d }
+    span.cli_output  { color: #de7407 }
+    &.reverse {
+      span.cli_prompt  { color: #2b2514; background-color: #de7407; font-weight: bold }
+    }
+  }
+  /* Just for fun, but should be useless */
+  &.uppercase, div.uppercase {
+    text-transform: uppercase;
+  }
+}
+</code>