How can I ignore leading and trailing linebreaks within an html “code” block using css, javascript or jquery?

Question

In my HTML source code, I have a code block like the following (I use showdown and highlight.js on this page):

double myNum         


        

Answer 1

These functions use a class (added to the pre) to remove leading and trailing whitespace

function removeWhitespace(indent) {
  // Get a list of all elements that need whitespace removed by indent value (will have class `indent-X`)
  // List may be 0 long - loop simply doesn't run
  var preElements = document.getElementsByClassName('indent-'+indent);
  for (i = 0; i < preElements.length; i++) {
    preElements[i].innerHTML = preElements[i].innerHTML.split('\n'+' '.repeat(indent)).join('\n').split('\n'+' '.repeat(indent-2)+'').join('').split("\n").slice(1,-1).join("\n");
    //split('\n'+' '.repeat(indent)).join('\n') -- Split at every newline followed by X spaces. Then join together with the newlines.
    // .split('\n'+' '.repeat(indent-2)+'').join('') -- The lastline will have 2 less spaces, so remove those, and the newline at the end. Add the tag back in.
    //.split("\n").slice(1,-2).join("\n"); -- Remove the first and last lines.
  }
}

function removeWhitespaces() {
  // Loop over all indents, 2 to 40
  for (indent = 2; indent <= 40; indent+=2) {
    removeWhitespace(indent);
  }
}

Simply add the class indent-X where X is the amount of whitespace you want to remove to the pre.

JSFiddle

function removeWhitespace(indent) {
  // Get a list of all elements that need indent removed by indent value (will have class `indent-X`)
  // List may be 0 long - loop simply doesn't run
  var preElements = document.getElementsByClassName('indent-' + indent);

  for (i = 0; i < preElements.length; i++) {
    preElements[i].innerHTML = preElements[i].innerHTML.split('\n' + ' '.repeat(indent)).join('\n').split('\n' + ' '.repeat(indent - 2) + '').join('').split("\n").slice(1, -2).join("\n");
    //split('\n'+' '.repeat(indent)).join('\n') -- Split at every newline followed by X spaces. Then join together with the newlines.
    // .split('\n'+' '.repeat(indent-2)+'').join('') -- The lastline will have 2 less spaces, so remove those, and the newline at the end. Add the tag back in.
    //.split("\n").slice(1,-1).join("\n"); -- Remove the first and last lines.

    // Remove the clickme element.
    document.getElementById('clickme').innerHTML = '';
  }
}

function removeWhitespaces() {
  // Loop over all indents, 2 to 40
  for (indent = 2; indent <= 40; indent += 2) {
    removeWhitespace(indent);
  }
}

.indent-14 {
  background-color: #ccc;
}

  

    Click Me
  
  
    
              function createCORSRequest(method, url) {
                var request = new XMLHttpRequest();
                if ('withCredentials' in request) {
                  request.open(method, url, true);
                } else if (typeof XDomainRequest != 'undefined') {
                  request = new XDomainRequest();
                  request.open(method, url);
                } else {
                  request = null;
                }
                return request;
              }