Песочница

Привет мир 1

HTML контент

<p id='test_code'>Пример HTML. <br>Ещё пример... </p>

<section id="text" class="vidim" contenteditable="true">
  <h3>Внеси изменения в стиль...</h3>
 <style scoped>
.vidim style { 
    display:block; 
    padding:10px;
    white-space:pre; 
    background:rgba(200,200,200,.8);
    } 
.vidim[contenteditable="true"] {
  top:1px; 
  left:10px;
  display:block;
  position: fixed; padding:10px; 
  width: auto;
  height: auto;
  margin-top: calc(5vmax + -10px); 
  margin-left: calc(60vw + -40%);
  font-family:Consolas, Monaco, monospace; 
  transform: scale(1); 
    } 
.vidim[contenteditable="true"] {
    outline:2px dashed #ccc;
    background-color:rgba(100,200,200,.2);
    } 
.vidim[contenteditable="true"]:hover{ 
    z-index: 10;
    outline:3px solid #28a;
  background-color:rgba(100,200,200,1);
    }
p[contenteditable="true"] {color:red;}
 </style> 
</section>

CSS контент

body {background:
radial-gradient(black 15%, transparent 16%) 0 0,
radial-gradient(black 15%, transparent 16%) 8px 8px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
background-color:#243844;
background-size:16px 16px;
} 
#test_code {background-color: #ccc;}
.vidim {   
   top:1px;    
   left:10px;   
   display:block;   
   position: fixed; 
   padding:10px;    
   width: auto;   
   height: auto;   
   margin-top: calc(5vmax + -10px);    
   margin-left: calc(60vw + -40%); 
   transform: scale(1); 
   font-family:Consolas, Monaco, monospace; 
   background-color:rgba(100,200,200,.2);
   } 

JavaScript контент

console.log("HI !!");

Вот результат

Песочница: 

Произвольные примеры

HTML контент

<!-- HTML контент примера -->
<main class="vid">
<div><h1>- Наведи мыша на квадрат...</h1>
  <p>Это будет чёрным.</p>
<section id="text" class="vidim" contenteditable="true">
  <h1>Масштабируй это окно колесом мыши</h1>
  <h3>Внеси изменения в стиль...</h3>
 <style scoped> 
.vidim style { 
    display:block; 
    padding:10px; 
    white-space:pre; 
    background:rgba(200,200,200,.6);
    } 
.vidim {
    display:block; 
    position: fixed;
    top:1px; 
    left:10px; 
    width: auto; 
    height: auto; 
    margin-top: calc(5vmax + -10px); 
    margin-left: calc(60vw + -40%);
    padding:10px; 
    font-family:Consolas, Monaco, monospace; 
    transform: scale(1); 
    } 

.vidim[contenteditable="true"] {
    outline:2px dashed #ccc;
    background-color:rgba(100,200,200,.4); 
    } 
.vidim[contenteditable="true"]:hover { 
    z-index: 10; 
    outline:3px solid #28a; 
    background-color:rgba(100,200,200,1); 
    }
p[contenteditable="true"] {color:red;}
 </style> 
</section>
    <p contenteditable="true">Это будет красным. <br>Ещё и редактируемым... </p>
    <p>Это будет чёрным.</p>
</div>
</main>

CSS контент

/* CSS контент примера */
body {background:
radial-gradient(black 15%, transparent 16%) 0 0,
radial-gradient(black 15%, transparent 16%) 8px 8px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
background-color:#243844;
background-size:16px 16px;}
.vid {
    margin: 5px;
    padding: 5px;
    border: 1px solid white;
    background-color: rgba(220,220,220,.9);
}

JavaScript контент

/* JavaScript контент примера */
function addOnWheel(elem, handler) 
  {if (elem.addEventListener) 
    {if ('onwheel' in document) 
     {elem.addEventListener("wheel", handler);} 
    else if ('onmousewheel' in document) 
     {elem.addEventListener("mousewheel", handler);} 
    else 
     {elem.addEventListener("MozMousePixelScroll", handler);}
    } 
  else 
    {text.attachEvent("onmousewheel", handler);}
  }

var scale = 1;

addOnWheel(text, function(e) 
  {
  var delta = e.deltaY || e.detail || e.wheelDelta;
   if (delta > 0) scale += 0.05;
   else scale = Math.max(scale -0.05, 0.05);

   text.style.transform = text.style.WebkitTransform = text.style.MsTransform = 'scale(' + scale + ')';
   e.preventDefault();
  }       )

Возможности

• Масштабирование окошечка div
• Демонстрация contenteditable="true"
• Редактирование style scoped 
• Пользовательские шаблоны

• Допустимое содержимое Нет, так как это bla.
•  
• Допустимое содержимое Нет, так как это empty element.