Ytukyg

So I'm making a cool terminal like 404 page for my fortnite stats site, I'm making so when you type a specific command it shows some ascii art, however whatever that's called is applying to the ascii art and removing a bunch of stuff like / so its just /. Is there any way to stop this from happening? Thanks.

    function showFortnite(){

    $('.terminal').append("<div class='fortnite'>"+

                             "<p class='prompt'>                                                                                   ,---,  </p>" +

                             "<p class='prompt'>                                                                                ,`--.' |  </p>" +

                             "<p class='prompt'>    ,---,.                       ___                           ___              |   :  :  </p>" +

                             "<p class='prompt'>  ,'  .' |                     ,--.'|_                ,--,   ,--.'|_            '   '  ;  </p>" +

                             "<p class='prompt'>,---.'   |   ,---.    __  ,-.  |  | :,'       ,---, ,--.'|   |  | :,'           |   |  |  </p>" +

                             "<p class='prompt'>|   |   .'  '   ,' ,' ,'/ /|  :  : ' :   ,-+-. /  ||  |,    :  : ' :           '   :  ;  </p>" +

                             "<p class='prompt'>:   :  :   /   /   |'  | |' |.;__,'  /   ,--.'|'   |`--'_  .;__,'  /     ,---.  |   |  '  </p>" +

                             "<p class='prompt'>:   |  |-,.   ; ,. :|  |   ,'|  |   |   |   |  ,' |,' ,'| |  |   |     /      '   :  |  </p>" +

                             "<p class='prompt'>|   :  ;/|'   | |: :'  :  /  :__,'| :   |   | /  | |'  | | :__,'| :    /    /  |;   |  ;  </p>" +

                             "<p class='prompt'>|   |   .''   | .; :|  | '     '  : |__ |   | |  | ||  | :   '  : |__ .    ' / |`---'. |  </p>" +

                             "<p class='prompt'>'   :  '  |   :    |;  : |     |  | '.'||   | |  |/ '  : |__ |  | '.'|'   ;   /| `--..`;  </p>" +

                             "<p class='prompt'>|   |  |        / |  , ;     ;  :    ;|   | |--'  |  | '.'|;  :    ;'   |  / |.--,_     </p>" +

                             "<p class='prompt'>|   :      `----'   ---'      |  ,   / |   |/      ;  :    ;|  ,   / |   :    ||    |`.  </p>" +

                             "<p class='prompt'>|   | ,'                        ---`-'  '---'       |  ,   /  ---`-'        / `-- -`, ; </p>" +

                             "<p class='prompt'>`----'                                               ---`-'             `----'    '---`   </p></div>");

One option is to use String.raw, which will allow you to type single backslashes in a string without having to double-escape them. Normally, to use a literal backslash in a string, you need to escape it first, eg '\' is a string literal with a single backslash in it. But, String.raw allows you to type exactly what you want the string to be.

The one issue is that String.raw's delimiters are backticks, which can only be escaped inside a template literal with a backslash before every backtick, so to keep the art aligned properly, replace all backticks with some other character, such as ~, while writing the art, and then replace all ~s with backticks afterwards.

Also, use <pre>s with 0 margin to keep the alignment correct when displaying the text in the browser:

const fortniteArt = String.raw`

                                                                                   ,---,

                                                                                ,~--.' |

    ,---,.                       ___                           ___              |   :  :

  ,'  .' |                     ,--.'|_                ,--,   ,--.'|_            '   '  ;

,---.'   |   ,---.    __  ,-.  |  | :,'       ,---, ,--.'|   |  | :,'           |   |  |

|   |   .'  '   ,' ,' ,'/ /|  :  : ' :   ,-+-. /  ||  |,    :  : ' :           '   :  ;

:   :  :   /   /   |'  | |' |.;__,'  /   ,--.'|'   |~--'_  .;__,'  /     ,---.  |   |  '

:   |  |-,.   ; ,. :|  |   ,'|  |   |   |   |  ,' |,' ,'| |  |   |     /      '   :  |

|   :  ;/|'   | |: :'  :  /  :__,'| :   |   | /  | |'  | | :__,'| :    /    /  |;   |  ;

|   |   .''   | .; :|  | '     '  : |__ |   | |  | ||  | :   '  : |__ .    ' / |~---'. |

'   :  '  |   :    |;  : |     |  | '.'||   | |  |/ '  : |__ |  | '.'|'   ;   /| ~--..~;

|   |  |        / |  , ;     ;  :    ;|   | |--'  |  | '.'|;  :    ;'   |  / |.--,_   

|   :      ~----'   ---'      |  ,   / |   |/      ;  :    ;|  ,   / |   :    ||    |~.

|   | ,'                        ---~-'  '---'       |  ,   /  ---~-'        / ~-- -~, ;

~----'                                               ---~-'             ~----'    '---~

`;

const htmlStr = "<div class='fortnite'>" + (

  fortniteArt

    .replace(/~/g, '`')

    .split('n')

    .slice(1) // remove first empty line, which is there for spacing reasons

    .map(line => `<pre class='prompt'>${line}</pre>`)

    .join('')

) + '</div>';

$('.terminal').append(htmlStr);

pre {

  margin: 0;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="terminal"></div>

Try to replace p with pre. Browser may leave whitespaces and special characters in pre as it is.