.code-input{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
border: 1px solid black;
display:block;
box-shadow: 0px 15px 50px rgba(10,10,10,.5);
border-radius: 6px;
}
.code-input textarea{
border: none;
background: rgba(25,25,25,0);
color: rgba(255,255,255, 0);
border-radius: 0;
caret-color: white;
}
.code-input:before{
position: absolute;
top: -20pt;
font-size: 10pt;
left: 0;
color: rgba(10,10,10,.5);
content:"<?php ";
}

.codeInput, .codePre {
  /* Both elements need the same text and space styling so they are directly on top of each other */
  margin: 0;
  padding: 16px 16px 16px 28px;
  border: 0;
  border-radius: 0;
}
.codeInput, .codePre, .codePre * {
  /* Also add text styles to highlighing tokens */
font-size: 10pt;
  font-family: monospace;
  line-height: 1.5;
  tab-size: 2;
}


.codeInput, .codePre {
  /* In the same place */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}


/* Move the textarea in front of the result */

.codeInput {
  z-index: 100000;
}
.codePre {
  z-index: 99999;
  white-space: pre-wrap;
}


/* Make textarea almost completely transparent */

.codeInput {
  background: transparent;
  caret-color: white; /* Or choose your favourite color */
}

/* Can be scrolled */
.codePre, .codeInput {
  overflow: auto;
}

/* No resize on textarea */
.codeInput {
  resize: none;
}

/* Paragraphs; First Image */
p code {
  border-radius: 2px;
  background-color: #eee;
  color: #111;
}

span.line-indicator{
position: absolute;
width: 50px;
text-align: right;
margin-left: -50px;
display: inline-block;
color: rgba(200,200,200,.5);
}
span.line-indicator:after{
content: '|';
}

/* PrismJS 1.29.0
https://prismjs.com/download.html#themes=prism-okaidia&languages=markup+css+clike+javascript+css-extras+javadoclike+markup-templating+php+phpdoc+php-extras&plugins=line-numbers+inline-color */
code[class*=language-],pre[class*=language-]{color:#f8f8f2;text-shadow:0 1px rgba(0,0,0,.3);-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}:not(pre)>code[class*=language-],pre[class*=language-]{background:#272822}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#8292a2}.token.punctuation{color:#f8f8f2}.token.namespace{opacity:.7}.token.constant,.token.deleted,.token.property,.token.symbol,.token.tag{color:#f92672}.token.boolean,.token.number{color:#ae81ff}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#a6e22e}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url,.token.variable{color:#f8f8f2}.token.atrule,.token.attr-value,.token.class-name,.token.function{color:#e6db74}.token.keyword{color:#66d9ef}.token.important,.token.regex{color:#fd971f}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}
pre[class*=language-].line-numbers{position:relative;padding-left:3.8em;counter-reset:linenumber}pre[class*=language-].line-numbers>code{position:relative;white-space:inherit}.line-numbers .line-numbers-rows{position:absolute;pointer-events:none;top:0;font-size:100%;left:-3.8em;width:3em;letter-spacing:-1px;border-right:1px solid #999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.line-numbers-rows>span{display:block;counter-increment:linenumber}.line-numbers-rows>span:before{content:counter(linenumber);color:#999;display:block;padding-right:.8em;text-align:right}
span.inline-color-wrapper{background:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyIDIiPjxwYXRoIGZpbGw9ImdyYXkiIGQ9Ik0wIDBoMnYySDB6Ii8+PHBhdGggZmlsbD0id2hpdGUiIGQ9Ik0wIDBoMXYxSDB6TTEgMWgxdjFIMXoiLz48L3N2Zz4=);background-position:center;background-size:110%;display:inline-block;height:1.333ch;width:1.333ch;margin:0 .333ch;box-sizing:border-box;border:1px solid #fff;outline:1px solid rgba(0,0,0,.5);overflow:hidden}span.inline-color{display:block;height:120%;width:120%}