Differences

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

Link to this comparison view

Next revision
Previous revision
livedemos:templateargon:start [2020/11/13 11:51] – created adminlivedemos:templateargon:start [2020/11/13 12:17] (current) – [Demo CLI-Plugin:] admin
Line 1: Line 1:
-====== Test Argon Template with CLI-Plugin ======+====== Argon Template with CLI-Plugin and Custom CSS ====== 
 + 
 +===== Demo CLI-Plugin: =====
  
 <cli> <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> </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>