Как удалить ведущие пробелы в моем <pre class="prettyprint-override">/<code> block without removing indentation in my HTML?

У меня есть следующий HTML:

<body>
    Here is some code:

    <pre><code>
        Here is some fun code!    
    </code></pre>
</body>

Но когда я просматриваю его, потому что код имеет отступ, pre все из-за шума. Я могу это исправить, возвращая содержимое назад к отступу, но это выглядит глупо. Могу ли я сделать, чтобы текст выше выглядел без отступов?

Ответ 1

Вы могли бы попробовать это, возможно:

pre, code{
    white-space:normal;
}

Fiddle

Ответ 2

Здесь вы идете, я решил придумать нечто более конкретное, чем изменить способ работы pre или code. Поэтому я сделал некоторое регулярное выражение для получения первого символа новой строки \n (которому предшествуют возможные пробелы - \s* используется для очистки лишних пробелов в конце строки кода и перед символом новой строки (что, как я заметил, у вас было) ) и найдите за ним следующие вкладки или пробельные символы [\t\s]* (что означает символ табуляции, символ пробела (0 или больше) и установите это значение для переменной. Затем эта переменная используется в функции замены регулярных выражений, чтобы найти все экземпляры ее и замените его на \n (newline). Поскольку вторая строка (где pattern получает значение), не имеет глобального флага (a g после регулярного выражения), он найдет первый экземпляр \n newline и установите для переменной значение pattern. Таким образом, в случае новой строки, за которой следуют 2 символа табуляции, значение pattern будет технически соответствовать \n\t\t, которое будет заменено, где каждый \n символ находится в этом элементе pre code (так как он проходит через каждую функцию) и заменяется на \n

$("pre code").each(function(){
    var html = $(this).html();
    var pattern = html.match(/\s*\n[\t\s]*/);
    $(this).html(html.replace(new RegExp(pattern, "g"),'\n'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
    Here is some code:

    <pre><code>
        Here is some fun code!
        More code
          One tab
            One more tab
            
            Two tabs and an extra newline character precede me
    </code></pre>
</body>

Ответ 3

Это работает, предполагая, что отступ должен основываться на первой строке кода:

//get the code element:
var code= document.querySelector('pre code');

//insert a span in front of the first letter.  (the span will automatically close.)
code.innerHTML= code.textContent.replace(/(\w)/, '<span>$1');       

//get the new span left offset:
var left= code.querySelector('span').getClientRects()[0].left;      

//move the code to the left, taking into account the body margin:
code.style.marginLeft= (-left + code.getClientRects()[0].left)+'px';

code {
  display: block;  //this is necessary for the JavaScript to work properly
}

<body>
    Here is some code:

    <pre><code>
        Here is some fun code!    
          And some more!
            Continuing
          Wrapping up
        Closing code now.
    </code></pre>
</body>