Промежутки рендеринга внутри тега pre (в HTML, не отображаются в виде текста для пользователя)

Можно ли отображать интервалы в предварительном теге?

В основном я показываю фрагменты кода на своем сайте, вы можете увидеть их здесь. Я хочу обернуть некоторые части кода тегами span.

Прямо сейчас, когда я добавляю <span> внутрь текста, чтобы перейти внутрь <pre>, он просто отображается как текст, например My code is so <span>cool</span> and I love it. Как я могу получить правильные разрывы слов и межстрочный интервал pre, при этом отображая теги span?


html css pre
person Don P    schedule 13.08.2014    source источник
comment
<pre> не будет автоматически отображать HTML как HTML... вам придется использовать что-то, чтобы экранировать код.   -  person Paulie_D    schedule 13.08.2014

Ответы (1)


arrow_upward
14
arrow_downward

Тег <pre> будет отображать свое содержимое буквально. Вы можете сделать пробел внутри другого тега значимым, но отображать теги внутри как HTM, используя некоторый CSS. Например:

CSS

.code {
    white-space: pre;

    /* If you want to use a monospace font like <pre> does by default */
    font-family: monospace;
}

HTML

<div class="code">
    My code is so <span>cool</span> and I love it
</div>
person Bojangles    schedule 13.08.2014
comment
Делать пробелы значимыми в тегах, отличных от pre..creative! До сих пор я всегда заставлял теги pre работать на меня во всех ситуациях, но это очень крутой способ обойти множество мелких проблем, с которыми вы можете столкнуться, работая исключительно с тегами pre! - person Govind Rai; 10.01.2017