Ответ 1
Вы могли бы попробовать это, возможно:
pre, code{
white-space:normal;
}
У меня есть следующий HTML:
<body>
Here is some code:
<pre><code>
Here is some fun code!
</code></pre>
</body>
Но когда я просматриваю его, потому что код имеет отступ, pre все из-за шума. Я могу это исправить, возвращая содержимое назад к отступу, но это выглядит глупо. Могу ли я сделать, чтобы текст выше выглядел без отступов?
Вы могли бы попробовать это, возможно:
pre, code{
white-space:normal;
}
Здесь вы идете, я решил придумать нечто более конкретное, чем изменить способ работы 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>
Это работает, предполагая, что отступ должен основываться на первой строке кода:
//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>