HTML

 <p class="titre">HTML </p> 
 <!------------------------------HighLight-CSS----------------------------------------------------->
 <pre class="pre-lh"><code class="hljs css"> 
 <span class="hljs-class"> Texto, c&oacute;digo...</span> 
 </code></pre>

CSS

 <style><!--
.titre {
 max-width:100px;
 padding:5px;
  
 background-color:#A9D9EF;
color: #fff;
 
border:2px double #78ABCC; border-radius:15px/5px;
 box-shadow:6px 6px 10px #ccc;
 }
 .pre-lh {
 width: 90%;
 border: 0px; 
 padding: 0;
 border-radius:15px/5px;
 box-shadow: 6px 6px 10px #ccc;
 margin-bottom: 20px;
 margin-left: 20px;
 }

  position:absolute;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  transition: all 1s ease-in;
  color: #fff;
  background-color: #fff;
  padding: 10px;
  backface-visibility: hidden;
box-shadow:6px 6px 10px #ccc;
}
.flipcard .back 
{
  position:absolute;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  transition: all 1s ease-in;
  color: #fff;
  background-color: #fff;
  padding: 10px;
  backface-visibility: hidden;
box-shadow:6px 6px 10px #ccc;
}
--></style>