Песочница

<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>

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);
   }

console.log("HI !!");

Песочница: 

<!-- 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 контент примера */
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 контент примера */
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.