Удалить пробелы из пробелов: pre element

Я хочу использовать собственный стиль для фрагментов кода в своем блоге. Я определил следующий стиль:

mystyle {  
  background: #C3FFA5;  
  border: solid 1px #19A347;  
  color: #191919;  
  display: block;  
  font-family: monospace;  
  font-size: 12px;  
  margin: 8px;  
  padding: 4px;  
  white-space: pre;  
}

Я использую его следующим образом:

<mystyle>
int main() {
    cout << "Hello World" << endl;
}
</mystyle>

Это дает следующий результат. Я пробовал Firefox и Google Chrome.

Output

Я хочу удалить дополнительную строку в начале блока. Очевидно, я понимаю, откуда берется новая линия, и что я могу использовать <mystyle>int main() { вместо этого. Если я использую <pre> вместо <mystyle>, нет дополнительной строки новой строки, так можно ли это сделать и с моим собственным стилем?

Ответы

Ответ 1

Добавьте стиль в тег <pre>, используя класс. Например (пытаясь сделать это простым здесь).

<pre class="console">
    // Some code here to be styled.
</pre>

<pre class="some-other-style">
    // Some code here to be styled.
</pre>

Затем ваш CSS выглядит так:

pre.console {
    color: #fff;
    background-color: #000;
}
pre.some-other-style {
    color: #f00;
    background-color: #fff;
}

Если он не делает то, что вы хотите, я смущен вашим вопросом, просто комментирую, и я удалю ответ.

Ответ 3

Настройте крайний край на любую установленную высоту линии.

.text {
    margin-top: -1em;
    white-space: pre-line;
}

Это также работает для FF, который: исправление первой строки не может быть исправлено.

Ответ 4

Форматирование кода здесь существенно, убедитесь, что каждая строка начинается с первого символа этой строки:

<pre class="code">
int main() {
    cout << "Hello World" << endl;
}
</pre>

Достаточно следующего CSS:

pre.code
{
    background: #C3FFA5;  
    border: solid 1px #19A347;  
    color: #191919;  
    display: block;  
    font-family: monospace;  
    font-size: 12px;  
    margin: 8px;  
    padding: 4px;
}

Прочитайте эту статью о пробеле и следующее в как " бороться с ним. Хотя в последней статье рассматриваются пробелы между встроенными элементами, решение для форматирования относится к вашей проблеме.

Ответ 5

Как насчет

<mystyle>into main() {
    // ...
}</mystyle>

Без пробела до или после...

Ответ 6

Просто исправьте свой шаблон, человек. Это самый простой способ:

<mystyle>int main() {
  cout << "Hello World" << endl;
}</mystyle>

Ответ 7

Когда мы используем white-space: pre-wrap, тогда, когда страница отображается, она также занимает пространство из вашего html файла. Предположим, что у нас есть: -

<div style="white-space:pre-wrap"> <!-- New Line -->
   <!-- 2 space --> This is my text
</div>

Текст будет выглядеть следующим образом: -

<leading line>     
<2 spaces >This is my text

Следовательно, мы должны выглядеть следующим образом: -

<div style="white-space:pre-wrap">This is my text</div>

Ответ 8

Я использую

белое пространство: начальное;

и он отлично работает со мной.