Insert selectable white spaces that will copy

Question

I'm rendering to html a large block of code with various levels of indenting that I want people to be able to copy into a text editor, with the indenting preserved.

Currently I have lots of characters in the code, which is very messy, and makes it hard to maintain. I'd rather do it via css, using the ::before operator, but all the solutions I've tried have been problematic.

If I insert \00a0 characters before the element using :before, the whitespace is displayed by the browser, but won't copy out into a text editor.

If I use 'pre', the whitespaces in the source are preserved, it makes the rendered html too dependent on the structure of the source code - i.e. if there are divs in the source, it adds extra lines in the rendered code, plus I have to worry about whitespaces and new lines in the source code etc., which is a problem when I reformat the code in the editor, which I have to do quite often to keep it clean (it's fairly dynamic).

So basically I need some css classes that will give me varying levels of indentation, without having to add or actual whitespace in the source, which will also copy from the browser into a text file.

Why don't you just have the code indented right off the bat? — Etheryte, Sep 05 '14 at 00:15
it's dynamic, it's bound to a knockout viewmodel, and it needs to be delineated with divs, spans etc. — Elliot Sumner, Sep 05 '14 at 00:28
I don't see how any of that rules out indenting it in the source. — Etheryte, Sep 05 '14 at 00:31
Nit, it's just as messy & unreliable using indenting in the source as it is using all over the place - the code is updated regularly & it would be a pain making sure all the spaces were correct in between other inline tags. and as mentioned, the editor itself adds further complexity. — Elliot Sumner, Sep 05 '14 at 00:34
Brian, jQuery would be fine yep, I'm already using some jQuery anyway. — Elliot Sumner, Sep 05 '14 at 00:34

score 1 · Accepted Answer · edited May 23 '17 at 12:12

1

The code below adds however many tabs the class indicates, class-4 produces 4 tabs and then prepends that number of tabs into the element containing the class - jsFiddle Demo it works line by line.

HTML

<p class="tab-1">1 tab indentations</p>
<p class="tab-2">2 tab indentations</p>
<p class="tab-3">3 tab indentations</p>
<p class="tab-4">4 tab indentations</p>

JS

var indentElements = $('[class*="tab-"]');

$.each(indentElements, function(index) {
   var indentAmount = parseInt(this.className.split('-')[1]);
   var indentation = new Array(indentAmount + 1).join('&nbsp;&nbsp;&nbsp;&nbsp;');
   this.innerHTML = indentation + this.innerHTML
});

Output

    1 tab indentations

        2 tab indentations

            3 tab indentations

                4 tab indentations

Steps:

Select all elements with a class containing tab-
Loop over them
Split the class name on - and get index 1 (the number that follows -)
Create an array with the above number of indexes and join 4 non breaking spaces with it (creates tabs)
Set the HTML of that element to its current HTML content plus the multiplied ;nbsps

Reference

I got step #4 from Peter Bailey at this answer - cool trick.

edited May 23 '17 at 12:12

Community

1
1

answered Sep 05 '14 at 00:40

Brian Dillingham

9,118
3
28
47

Nice idea using class names, I tried to make this flexible so you can indent infinitely – Brian Dillingham Sep 05 '14 at 01:16
Nice one Brian, that's perfect, thanks. bit bizarre that we have to do it programmatically, but hey, whaddyagonnnado. – Elliot Sumner Sep 05 '14 at 02:56
Thanks, glad you like it. There aren't any selectable spaces with any CSS solutions Ive thought of. So why not programmatically add them :) Cheers. – Brian Dillingham Sep 05 '14 at 02:59
quick question - I've moved the javascript into a separate file, and referenced it (& jquery) in my html, but the tab-1 class is not applying - chrome is telling me $ is not defined. do I have to change that to something else? when I inspect the element that is supposed to have tab-1 applied, it is not showing an an applied class. – Elliot Sumner Sep 05 '14 at 03:39
`$` is jQuery, make sure it is loaded and if it is, make sure it is loaded before this code. If it isn't this code's dependency on jQuery will cause that error. Afterwards if it is loading properly but still causing an issue.. place code within `$(document).ready(function(){ .. })` to insure the dom and all of the elements are loaded before performing any operations on them – Brian Dillingham Sep 05 '14 at 03:41
thanks - I'm using knockout.js as well, which loads on dom ready, but may be in some sort of race condition with jQuery, I'll see what I can sort out. – Elliot Sumner Sep 05 '14 at 03:58
Any other console errors? Just clarifying ` – Brian Dillingham Sep 05 '14 at 03:59
aha! yes I had jquery loading after your script. doh! all working now, thanks. – Elliot Sumner Sep 05 '14 at 04:45
Ok I can comfortably part with this little code now knowing its in working condition :) take care – Brian Dillingham Sep 05 '14 at 04:48

Insert selectable white spaces that will copy

1 Answers1