Preserve formatting in code snippet area with JavaScript

Question

I'm trying to create my own code snippet area where the author can write pure html inside a code block which will be converted to text automatically. This works as demonstrated here:

https://jsfiddle.net/mtdrdvaw/2/

However, the line break of elements doesn't persist once converting them to text. I would like the formatting to remain the same after the HTML to text conversion.

Is this possible and how could I achieve this?

This is my code snippet markup:

<code class="code-snippet">
  <div class="item">test</div>
  <div class="item">test1</div>
  <div class="item">test2</div>
</code>

And here's the script:

var codeSnippets = document.getElementsByClassName('code-snippet'),
    length = codeSnippets.length,
    i;

for (i = 0; i < length; i++) {

  var code = codeSnippets[i].innerHTML,
      node = document.createTextNode(code);

  codeSnippets[i].innerHTML = '';
  codeSnippets[i].appendChild(node);
}

EDIT: Since I was unclear, I've looked at samp, pre and code but none of them did what I wanted them to do. I want the area to use my own padding and look the way it is written in the code editor of the author. Using just pre for example gives it a ridiculous white space that I do not want.

@Oka I don't understand the downvote nor what your point is. I've looked at a number of options but none of them works the way I want them to since the formatting isn't what I want it to be. — Chrillewoodz
– Chrillewoodz, Commented Sep 19, 2015 at 10:04

Praveen Kumar Purushothaman · Accepted Answer · 2015-09-19 10:00:11Z

3

You need to use:

white-space: pre;

Snippet

var codeSnippets = document.getElementsByClassName('code-snippet'),
    length = codeSnippets.length,
    i;

for (i = 0; i < length; i++) {
  
  var code = codeSnippets[i].innerHTML,
      node = document.createTextNode(code);
  
  codeSnippets[i].innerHTML = '';
  codeSnippets[i].appendChild(node);
}

.code-snippet {
  display: block;
  width: 100%;
  height: 100px;
  padding: 15px;
  border: 2px solid lightgrey;
  background-color: #15181F;
  color: white;
  white-space: pre;
}

<code class="code-snippet">
  <div class="item">test</div>
  <div class="item">test1</div>
  <div class="item">test2</div>
</code>

Fiddle: https://jsfiddle.net/cgoe2ptf/

answered Sep 19, 2015 at 10:00

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Chrillewoodz Over a year ago

Just what I was looking for, but is there a way to remove that ridiculous spacing that occurs? I want it to just use my own padding.

Praveen Kumar Purushothaman Over a year ago

@Chrillewoodz You have a line break on the top and spaces on the left. Please get rid of them using trim().

Chrillewoodz Over a year ago

Tried it, the issue is the line breaks between elements that doesn't get removed. And should I remove them, it will no longer line break and have an indent if there is one. Not sure if this is do-able, what do you think?

Chrillewoodz Over a year ago

Doesn't work with indent but it's ok, since I found a workaround.

Chrillewoodz Over a year ago

Yes, that's what I responded to.

|

Collectives™ on Stack Overflow

Preserve formatting in code snippet area with JavaScript

1 Answer 1

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related