In order to make ascii art nicer to look at, I was experimenting with some CSS. While I thought to make a dedicated generator in javascript, I luckly found that there is an easier way to do so in CSS. Originally I did the css styling for reddit as can be seen in this post. Since it works well there, I decided to try it out for my site.

 __  __  _____  ____  _____  ___  _  _  _  _  ____ 
(  \/  )(  _  )( ___)(  _  )/ __)( \/ )( \( )( ___)
 )    (  )(_)(  )__)  )(_)( \__ \ \  /  )  (  )__) 
(_/\/\_)(_____)(__)  (_____)(___/ (__) (_)\_)(____)

Above banner ascii text "mofosyne" was generated from this banner generator

To get this style, just read on.

While it looks very nice for many ascii-arts, it really does mess up any textual data within the art, and make it much harder to read. So best practice is to just restrict this style to ascii-arts only, and to exclude any "ascii-diagrams".

Here is an example of an ascii-diagrams that is messed up when this style is applied.

    _________________________________________________________________
    |                   __________                                  |
    |                   |        |                                  |
    |   |               | EEPROM |          (RX)        (VCC)       |
    |   |___            |________|                                  |
    |   ____|   |   _________________       (GPIO0)     (RESET)     |
    |   |___    |   |               |                               |
    |   ____|   |   |   ESP8266     |       (GPIO2)     (CH_PD)     |
    |   |___    |   | Wifi+ARM_MCU  |                               |
    |   ____|   |   |_______________|       (GND)       (TX)        |
    |   |_______|__                                                 |
    |_______________________________________________________________|

    RX      :   UART Receive Pin (Connects to TX of other device)
    VCC     :   3.3V Upper Power rail (Input power)
    GPIO0   :   General Purpose Input Output (0)
    RESET   :   Reset Device
    CH_P2   :   General Purpose Input Output (2)
    CH_PD   :   Chip Enable Pin (pull high)
    GND     :   0V Power Ground
    TX      :   UART Transmit Pin  (Connects to RX of other device)

Installing in Jekyll

Here is the CSS style to place in your css file.

/*
Diagram and ASCII ART styling for Jekyll (and other markdown parser that appends a .language- prefix)
*/

.language-ascii-art {
 display: inline-block; 
 font-family: "Lucida Console", Monaco, monospace;
 letter-spacing: -0.2em;
 line-height: 0.8em;
 text-shadow: 0 0 5px rgba(100,100,100,0.5);
}

.language-ascii-noshadows {
 display: inline-block; 
 font-family: "Lucida Console", Monaco, monospace;
 letter-spacing: -0.2em;
 line-height: 0.8em;
}

So now when you type in a fenced block that specifies "ascii-art" as the syntax highlighting option, it will be styled. This code will have ".language-ascii-art" as it's class name. And thus will be styled as an ascii-art.

```ascii-art
         /\_/\
    ____/ o o \
  /~____  =-= /
 (______)__m_m)
```

```ascii-art-noshadows
         /\_/\
    ____/ o o \
  /~____  =-= /
 (______)__m_m)
```

Will turn into

         /\_/\
    ____/ o o \
  /~____  =-= /
 (______)__m_m)

and if you don't like drop shadows (as requested by tom4000 from hackernews ):

         /\_/\
    ____/ o o \
  /~____  =-= /
 (______)__m_m)

This ascii-art CSS styling snippet is public domain. Just use it how you wish.


Reddit Style

Need to use one for subreddit? Use this style:

/*
    CSS for nicer looking ascii art in reddit
    Demo: http://www.reddit.com/r/textfiles/comments/2s9ybk/random_ascii_art/
*/
code {
 display:inline-block; 
 font-family:"Lucida Console", Monaco, monospace ;
 letter-spacing: -0.2em;
 line-height: 0.8em;
 text-shadow: 0 0 5px rgba(100,100,100,0.5);
}

Demo

This ascii-art CSS styling snippet is public domain. Just use it how you wish.


Bit of experiment (blurred, no text)

.language-ascii-art-blur {
 color: transparent; /*hide the text this time*/
 display: inline-block; 
 font-family: "Lucida Console", Monaco, monospace;
 letter-spacing: -0.3em;
 line-height: 0.6em;
 text-shadow: 0 0 4px #000000;
}

Thus:

i`it)v|[[[[(//s+)`(-\\/JJgbdd@@@@@@@dmKK(c!(/-[2=/cct/!-v\!_L\)|
]-!/(!-)\L\)v|c5(!,!Ldd@@@@@@@@@@@@@@@@@@@dK/]!c\\\v|i\/cT\v((c-
]!`/v\//(-|t\VvcL!m@@@@@M@@@@@@@@@@@@@@@@@@@@bLt\\|)c/2-vv)/it\.
--/-,\,\v\,|)/v/m@@@@@@K@@@@@@@@@@@@@@@@@@@@@@@bK!v!-( )-!.[/cT
//.\--'--|-/c(e@@@@@@@DD@@@@@@@@@@@@@@@@@@@@@@@@@@s\\\\-||/v!c\.
-,-|\`||\-\/id@@@@@@@@N@@@@@@@@@@@@@@@@@@@@@@@@@@@@b.),`-,-/c-`i
!,\!-!-!'!-!d@@@@@@@P[+~**AAA@@@@@@@@@@@@@@@@@@@@@@@b/./`c-/.\7-
--'.-- -/,id@@@*P!`          \'Z8@@@@@@@@@@@@@@@@@@@@@i.\\'.\.c
',`,`\'-,-J@@5`-           -- `-iYA@@@@@@@@@@b@@@@@@@@@_\-|-\c-
'. -.,`/.G@@K- `               - )7KM@@@@@@@@@@@@@@@@@@@c-----/
- `-  --i@@Ai                    -!ZZ@@@@@@@@@@@@@@@@@@@b! \`|-`
 `-,'- G@@@[,                    '.D8K@@@@@@@@@@@@@@@@@@@[/-,-/.
-` .-/v@@@A)                      -)ZdMd@@@@@@@@@@@@@@@@@@\' _\
- ` ,iVJ@@@!                     '-!(K5K@@@@@@@@@@@@@@@@@@[(/s[.
  - i\G@@@Z-                    ' ! -i55ZZ@@@@@@@@@@@@@@@@@)(4)`
 , -|b@@@@!\                     '  ` |-tYG@@@@@@@@@@@@@@@@XNYZ-
   tt@@@@A-,                        '  `)(d@@@@@@@@@@@@@@@@D)8A[
   )8@@@@@\                         ,-'-/Kd@@@@@@@@@@@@@@@@@KD@[
  ]]Z@@@@d|-              ,ii.c,, -.icLZKK@@@@@@8@K@@@@@@@@@(@8[
  KN8@@@@@( .i!vGG_      J4Kb8ZKb@bbK@d@88@@@@@@@b@@@@@@@@@@dK@-
 )/8K@@@K@b@dP~~~T4(    Jd@@7`___s@M@@@@MM8d@@@d@@@@@@@@@@@@LM8[
\!48@K@@@@8@@d*@@@bVi   bAKLY~~@@@@@@*ff/\NM8@@@@@@@@@@@@@@@db@[
,\\Kb@@@d@.~t` !*~!`.  -MA)    '~'.).` `,'K@@@@@@@@@@@@@@@@@AKb[
,`8M@@@@@@ -`,,gvZ``    A//-  ..c\+\`    i]d@@@@@@M@@@@@@@@@@@8[
i\@8@K@@@D              \!'             !iZ8@@@8A@@@@@8d@b@@@8M[
e8d5@@@@@@             '!-             '-)8@@@@@@@@@@@@@@@@@@M8i
8dZ8@M@@@@-             v  ,          ,\tK@@@@@@@@@@@@A@@@@@@Z2|
@b@AK@@@b@[              //           cctbA@@@AK@@d@@d@@@K@@@bmi
@@8@M@8@@@P-            -=/.         /iD8d@@@@@@@@@@@@@@A@@@d@@[
@8@@@MA@@@@\-      .   _)g2i        -((dKK@@@@@d@@@@d@@K@@@@@@K[
@@@bAK@@K@@)i     'c,,Kb@@bK       )X)Kb@M@@d@@@Mb@@A@d@@@@@@8@[
@K@b@@@@A@AA/i-     ~M@@@@Mc    .,\c=)D8d@@b@@@d@@@@@@@@@@8d@@A[
@@@@Mb@@@@@@('c\`     PPK((,i]v|-\-v)8XNAdMK@@@@@@@b@@MK@A@@@@@[
@@8@@MK@d@A@L!--c)s_, ,(ZsbLb@\`- .-N]/KM@@@@@@@d@@@A@@@@@@@@d@[
@@Kb@@@K@b@@@/-  !''~~Vff*N5f -` -,\))KK@@@@@@@MK@@d@@@M8d@b@@@[
@b@@@KAK@@@@@@2--    ,,_JJ/i)/- |/v)NK@8d@@@@@@@@@@8@@@@@@@@M@K[
@@8d@K@@@b@@@@@d!,   'VV\)\\)\7(-)4Jb@8@A@@@K@d@@@@@@@8@@@@@@@@[
M@@@@8@@K@Kb@@@d@v.       `-\\/v)88b@M@A@K@@M@@@A@@M@8@@A@d@8@M[
Zb@d@M@K@@@@@@@@@@m       -)!/stbb@b@@A@b@@@@@Kb@@@@@@@b@@@K@@@[
K@@d@@@@@d@M@8@@@@@Ks   ,-/vJD@@8d@K@@@@@@8@@@@@@@@@@MK@@@b@@M@[
tN@b@@d@d@M@@@@@@@@@@LL4JKd@A@@d@@K@@@@MK@@@@8@@@@@@@@@@@b@@@@@[
)NM@8b@@A@@@A@@@@@@@@@@@@@@A@@A@@8@@K@d@@@@M@@K@@K@A@@@8@@M@@@@[
(tMM@@@d@@M8@@@@A@@@@A@@@A@@@@@@@@@A@@@@8b@@8d@@@@@@@@@@@@@@@@M[
tNZ@@K@@@d@@@@A@@@@@8@@@/4N@@8@b@@d@@M@8@MK@M8@K@@@@@@d@@@@@@@@[
M/KA8@@@MA@@@M@@@@@@@@@@[|t*Z@N@@@@8@@M8ZAZZ@M@@@A@d@@@@@K@@@d@[
bYJ4M@@@@@@A@@@@@@@@@@@@D.\'(YKKZD@8dK@5A84YZ@dM@@@@@@@@@@@@d@@[
K5dM8@8d@d@@@@@@@@8@@@@@@..-!/))ZK5AK4)AY(/XY/Z@@@A@@@d@@@M@@@@[
Y8dNA@@AK@@d@@@b@@@@@@@@@L,-,\!]]\X(5)Z/7c\\t5/K@@@@@@@@b@@@@@@[
8M8@@@A@@@A@@8@@@@@@@@@KDLt! !,-|t'(-\\!,\/,\!ZJG@@@d@Md@@@G@@@[

source: http://www.chris.com/ascii/index.php?art=art%20and%20design/mona%20lisa


Another experiment ( CRT glow )

This preserves the look of ASCII text. But with the additional retro benifit of replicating the "bleed-in" effect that larger characters has (which ASCII artist in the past probbly exploited in CRT screens to give the image a "filled in" look).

For Jekyll (using "ascii-art-glow")

.language-ascii-art-glow {
 font-family: monospace;
 text-shadow: 0 0 20px , 0 0 40px, 0 0 80px , 0 0 100px;
}

For subreddit in reddit:

code {
 font-family: monospace;
 text-shadow: 0 0 20px , 0 0 40px, 0 0 80px , 0 0 100px;
}

 An example of a CRT glowing effect ASCII image source

  • Pros: More faithful to the original effect in CRT monitors that artist in the old days exploited. Normal non art text embedded within the ASCII-art is readable.

  • Cons: Is not as pretty as the previous suggestion in here . Also it requires a dark background on light text to work best.

╔═ comhack@Cerberus 10:49 PM 
╚═══ ~-> ssh -p xxxx comhack@xx.xxx.xxx.xxx

^[[H^[[2J
   _____                .__      .____    .__
  /  _  \_______   ____ |  |__   |    |   |__| ____  __ _____  ___
 /  /_\  \_  __ \_/ ___\|  |  \  |    |   |  |/    \|  |  \  \/  /
/    |    \  | \/\  \___|   Y  \ |    |___|  |   |  \  |  />    <
\____|__  /__|    \___  >___|  / |_______ \__|___|  /____//__/\_ \
        \/            \/     \/          \/       \/            \/


OS: Archlinux \s   Kernel: \r   Processor: \m   Terminal: \l   Users: \u

comhack@xx.xxx.xxx.xxx's password: 

ASCII image source

For more information about how artist and game makers exploted the glow effect of CRT, an interesting article here can be read:

What a Wonder is a Terrible Monitor — December 4, 2012 ( http://ascii.textfiles.com/archives/3786 )


Ascii art tests

.--.     /\                ____
'--'    /__\    (^._.^)~ <(o.o )>

.g@8g.  db
'Y8@P' d88b

:$#$: "4b. ':.
:$#$:   "4b. ':.