How do I make placeholder text permanent and formatted correctly?

I would stay away from using a data attribute or placeholder text to accomplish this. I think you will find it pretty difficult to include line breaks and cross-browser compatibility if you go that route. What about using 2 absolutely positioned textareas stacked on top of each other? The lower textarea would contain the text the user needs to type and would be disabled and the top one would have a transparent background so you could see the text below. Here's a quick mockup of how that could look:

textarea {
  position: absolute;
  font-size: 20px;
}

#type {
  color: red;
}

#typed {
  background: none;
  z-index: 10;
}

<div id='test' class="placeholder">
  <textarea id="typed" name="typed" cols=50 rows=15></textarea>
  <textarea id="type" name="typed" cols=50 rows=15 disabled>
    This is the text you have to type.
    You can put as many lines as you want.
  </textarea>
</div>

JSFiddle