EXAMPLE
    I like GUI stuff - even in Linux!  
    Down with vi! Long live the GUI text-editor!
    For example:  apache2-directory-browsing-on-by-default/
    
The styled inner text isn't responsive ... The whole ensemble isn't exactly accurate and is rather simplistic ... it's just for simple presentation effect

faux terminal and faux gEdit GUI pics

To make otherwise boring <pre> and <code> tags look more interesting, I’m starting to introduce some shortcodes e.g. [crt] and [gedit] to start off with to spice things up a bit.

It’s just CSS and some background images with html returned by the shortcode, so nothing stopping me from making it “better” when convenient.

[crt] example:

[crt] EXAMPLE   

Extract of the WordPress html with shortcodes that comprise the linked page:

[crt length=’27’ ]
  sudo gedit /etc/apache2/apache2.conf
[/crt]

[gedit title='/etc/apache2/apache2.conf']
  <Directory /var/www/html>
    Options Indexes FollowSymLinks
    AllowOverride All
    Require all granted
  </Directory>
[/gedit]

<em>Changing to:</em>

[gedit title='/etc/apache2/apache2.conf']
  <Directory /var/www/html>
    Options FollowSymLinks
    AllowOverride All
    Require all granted
  </Directory>
[/gedit]

[crt length='28']
  sudo service apache2 restart
[/crt]

The [crt] shortcode is based on (ripped-off from) this:
http://jsfiddle.net/rudyjahchan/qmjg92gq/?utm_source=website&utm_medium=embed&utm_campaign=qmjg92gq

Implementing it on my site wasn’t without challenges however. On this site I don’t use SCSS so first of all had to use the compiled CSS version. But more significantly, the example relied on Bootstrap CSS being available, and was based on navigation tags. So I had to download Bootstrap (that would mess up this site as is), and extract the relevant CSS, and rename everything, simplifying where I could.

The actual shortcode is bolted onto my syntaxhighlighter plugin. It never occurred to me that counting characters in “the content” would be so difficult, and for brevity, and flexibility, for the typing-effect, decided to count the number of characters required for the typing-effect-steps, as a shortcode title-attribute.

[crt] shortcode function

    
    // USES STYLING IN style.css !!!
    // ALSO: xarta_before_the_content_normal_filters($content) ... added crt to list of shortcodes
    //       to protect from wpauto et al.
    public function crt_style($atts = [], $content = '')
    {
       $content = TheContent::xarta_remove_xprotect_pre_tags($content);
       $numLetters = $atts['length'];
       //$numLetters = mb_strlen($content,'UTF-8');
       
       $output = 
        '<div class="workspace">'.
            '<div class="faux-terminal-content"><div class="faux-terminal-content-action-bit">'.
            $content.
            ' <span style="-webkit-animation: typing 6s steps('.$numLetters.', end) infinite alternate, blink-caret 1s step-end infinite; animation: typing 6s steps('.$numLetters.', end) infinite alternate, blink-caret 1s step-end infinite;"> </span>'.
            '</div></div>'.
            '<div class="faux-terminal"><div class="layer"></div><div class="overlay"></div></div>'.
        '</div>';
        
        return $output;
    }

Self-evidently quite simple – though I use another function in my syntaxhighlighter plug-in triggered to start very early before wp-auto etc., to wrap this content in protective <pre> tags with identifying class in the opening tag, and immediate post-tag html comment on the closing tag so that they can be easily removed again later. Still a little buggy but can work fine if I’m careful with what I feed it.

The complexity is all in the CSS which I’ve only slightly modified from the jsfiddle example.

CSS for the [crt] effect – needs lots of tidying

...

/* for [crt ] shortcode green typing effect */
/* copied from bootstrap css and renamed - STILL NEED TO RATIONALISE/CONSOLIDATE */
.faux-terminal-content-action-bit {
  float: left;
  padding: 15px 15px;
  font-size: 18px;
  line-height: 20px;
  height: auto;
}
.faux-terminal-content-action-bit:hover,
.faux-terminal-content-action-bit:focus {
  text-decoration: none;
}
.faux-terminal-content-action-bit > img {
  display: block;
}


.faux-terminal-content {
  background-color: #222;
  border-color: #080808;
}
.faux-terminal-content .faux-terminal-content-action-bit {
  /* color: #9d9d9d; */
  color: #00C853;
}
.faux-terminal-content .faux-terminal-content-action-bit h2 {
  /* color: #9d9d9d; */
  line-height: 120%;
  color: #00C853;
}
.faux-terminal-content .faux-terminal-content-action-bit:hover,
.faux-terminal-content .faux-terminal-content-action-bit:focus {
  color: #fff;
  background-color: transparent;
}



.faux-terminal-content {
  margin-bottom: 0;
  padding-left: 0;
  list-style: none;
}
.faux-terminal-content > li {
  position: relative;
  display: block;
}
.faux-terminal-content > li > a {
  position: relative;
  display: block;
  padding: 10px 15px;
}
.faux-terminal-content > li > a:hover,
.faux-terminal-content > li > a:focus {
  text-decoration: none;
  background-color: #eeeeee;
}


.faux-terminal-content {
  position: relative;
  min-height: 100px;
  margin-bottom: 20px;
  border: 1px solid transparent;
}
@media (min-width: 768px) {
  .faux-terminal-content {
    border-radius: 4px;
  }
}



/* http://jsfiddle.net/rudyjahchan/qmjg92gq/?utm_source=website&utm_medium=embed&utm_campaign=qmjg92gq */

.workspace {
  width: 100%;
  height: 100%;
  background: #fff;
  position: relative;
}

.faux-terminal-content {
  font-family: monospace;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

.faux-terminal-content-action-bit {
  position: relative;
}

.faux-terminal-content-action-bit span {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 0;
  background: #212121;
  border-left: .5em solid;
  box-sizing: border-box;

}

/* now appying these two animation styles in php in [crt  ] shortcode processing */
.green-typing-effect-027
{
    -webkit-animation: typing 6s steps(27, end) infinite alternate, blink-caret 1s step-end infinite;
    animation: typing 6s steps(27, end) infinite alternate, blink-caret 1s step-end infinite;
}

.faux-terminal {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100px;
  min-height: 51px;
  z-index: 4000;
  pointer-events: none;
}
.faux-terminal:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100px;
  min-height: 51px;
  z-index: 4010;
  background: -webkit-linear-gradient(#444 50%, #000 50%);
  background: linear-gradient(#444 50%, #000 50%);
  background-size: 100% 4px;
  background-repeat: repeat-y;
  opacity: .14;
  box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.8);
  -webkit-animation: pulse 5s linear infinite;
  animation: pulse 5s linear infinite;
}
.faux-terminal:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100px;
  min-height: 51px;
  z-index: 4011;
  background-color: #00C853;
  background: -webkit-radial-gradient(center, black 0%, rgba(0, 0, 0, 0.62) 45%, rgba(0, 9, 4, 0.6) 47%, #00C853 100%);
  background: radial-gradient(ellipse at center, #000000 0%, rgba(0, 0, 0, 0.62) 45%, rgba(0, 9, 4, 0.6) 47%, #00c853 100%);
  box-shadow: inset 0px 0px 4px 4px rgba(100, 100, 100, 0.5);
  opacity: .1;
}
.faux-terminal .layer {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100px;
  min-height: 51px;
  z-index: 4001;
  box-shadow: inset 0px 0px 1px 1px rgba(64, 64, 64, 0.1);
  background: -webkit-radial-gradient(center, #00c351 0%, rgba(64, 64, 64, 0) 50%);
  background: radial-gradient(ellipse at center, #00c351 0%, rgba(64, 64, 64, 0) 50%);
  -webkit-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-transform: perspective(20px) rotateX(0.5deg) skewX(2deg) scale(1.03);
  transform: perspective(20px) rotateX(0.5deg) skewX(2deg) scale(1.03);
  -webkit-animation: glitch 1s linear infinite;
  animation: glitch 1s linear infinite;
  opacity: .9;
}
.faux-terminal .layer:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100px;
  min-height: 51px;
  background: -web-kit-radial-gradient(center, rgba(0, 0, 0, 0.5) 0%, rgba(64, 64, 64, 0) 100%);
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.5) 0%, rgba(64, 64, 64, 0) 100%);
  opacity: .1;
}
.faux-terminal .overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100px;
  min-height: 51px;
  z-index: 4100;
}
.faux-terminal .overlay:before {
  content: '';
  position: absolute;
  top: 0px;
  width: 100%;
  height: 5px;
  background: #fff;
  background: -webkit-linear-gradient(to bottom, rgba(255, 0, 0, 0) 0%, snow 50%, rgba(255, 255, 255, 0.98) 51%, rgba(255, 0, 0, 0) 100%);
  background: linear-gradient(to bottom, rgba(255, 0, 0, 0) 0%, snow 50%, rgba(255, 255, 255, 0.98) 51%, rgba(255, 0, 0, 0) 100%);
  opacity: .1;
  -webkit-animation: vline 1.25s linear infinite;
  animation: vline 1.25s linear infinite;
}
.faux-terminal .overlay:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100px;
  min-height: 51px;
  box-shadow: 0 2px 6px rgba(25, 25, 25, 0.2), inset 0 1px rgba(50, 50, 50, 0.1), inset 0 3px rgba(50, 50, 50, 0.05), inset 0 3px 8px rgba(64, 64, 64, 0.05), inset 0 -5px 10px rgba(25, 25, 25, 0.1);
}

@-webkit-keyframes vline {
  0% {
    top: 0px;
  }
  100% {
    top: 100%;
  }
}
@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1.001);
    opacity: .14;
  }
  8% {
    -webkit-transform: scale(1);
    opacity: .13;
  }
  15% {
    -webkit-transform: scale(1.004);
    opacity: .14;
  }
  30% {
    -webkit-transform: scale(1.002);
    opacity: .11;
  }
  100% {
    -webkit-transform: scale(1);
    opacity: .14;
  }
}
@-webkit-keyframes glitch {
  0% {
    -webkit-transform: scale(1, 1.002);
  }
  50% {
    -webkit-transform: scale(1, 1.0001);
  }
  100% {
    -webkit-transform: scale(1.001, 1);
  }
}
@-webkit-keyframes blink-caret {
  from, to {
    border-color: transparent;
  }
  50% {
    border-color: #00C853;
  }
}
@-webkit-keyframes typing {
  from {
    width: 100%;
  }
  to {
    width: 0;
  }
}
@keyframes vline {
  0% {
    top: 0px;
  }
  100% {
    top: 100%;
  }
}
@keyframes pulse {
  0% {
    transform: scale(1.001);
    opacity: .14;
  }
  8% {
    transform: scale(1);
    opacity: .13;
  }
  15% {
    transform: scale(1.004);
    opacity: .14;
  }
  30% {
    transform: scale(1.002);
    opacity: .11;
  }
  100% {
    transform: scale(1);
    opacity: .14;
  }
}
@keyframes glitch {
  0% {
    transform: scale(1, 1.002);
  }
  50% {
    transform: scale(1, 1.0001);
  }
  100% {
    transform: scale(1.001, 1);
  }
}
@keyframes blink-caret {
  from, to {
    border-color: transparent;
  }
  50% {
    border-color: #00C853;
  }
}
@keyframes typing {
  from {
    width: 100%;
  }
  to {
    width: 0;
  }
}


...

[gedit] shortcode function

// ALSO: xarta_before_the_content_normal_filters($content) ... added gedit to list of shortcodes
//       to protect from wpauto et al.
public function gedit_style($atts = [], $content = '')
{
   $output = '<div class="gedit"><div class="gedit-top">'.$atts['title'].'<div class="gedit-top-right"></div></div>'.
      '<div class="gedit-content"><pre>'.TheContent::xarta_remove_xprotect_pre_tags($content).'</pre></div></div>';
   return $output;
}

Very simple!

And simple CSS (with much potential for improvement e.g. even the shadow needs work, and I'm debating my decision for nowrap in the content):

/* these gedit look-a-like css styles are applied in php using my [gedit   ] shortcode */
.gedit
{
    margin-bottom: 1rem;
    position: relative;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.gedit-top
{
    background-image: url("/wp-content/themes/simone-child/gedit-css/top.png");
    background-repeat: no-repeat;
    height: 73px;
    width: auto;
    color: #fff;
    padding-left: 70px;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    font: normal bold 14px/30px "Ubuntu Mono", monospace;
}
.gedit-top-right
{
    background-image: url("/wp-content/themes/simone-child/gedit-css/top-right.png");
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    height: 73px;
    width: 52px;
    color: #fff;
    margin-right: 0px;
    right: 0px;
    overflow: hidden;
    white-space: nowrap;
    z-index: 5;
}
.gedit-content
{
    padding-bottom: 4rem;
    background-repeat: no-repeat;
    background-color: #F8F8FF;
    background-position: right bottom;
    background-image: url("/wp-content/themes/simone-child/gedit-css/bottom.png");
}
.gedit-content > pre
{
    font: normal normal 14px/30px "Ubuntu Mono", monospace;
    background-color: transparent;
    margin-bottom: 0!important;
    overflow: hidden;
}

top-right part of scaffolding for faux linux gedit
Top right part

top part of scaffolding for faux linux gedit
The top part

bottom part of scaffolding for faux linux gedit
The bottom part

...

It should be obvious that I could actually, with time and effort, replicate much of the images with pure css or by repeating image parts e.g. the bottom part should be easy to replicate, and most of the top part could be a repeating image. A project for another day.

What I will do soon though, is a DOS equivalent. For bash I'll stick to syntaxhighlighted output.