Как сбросить вкладки внутри <pre><code>? - PullRequest
Новая
       54

Как сбросить вкладки внутри <pre><code>?

1 голос
/ 25 июня 2019

У меня есть структура div с несколькими уровнями глубины, где я хотел бы использовать <pre> и <code>, чтобы использовать некоторый синтаксис.

По сути, это выглядит примерно так: 

<div class="one">
  <div class="two">
     <div class="three">
        <pre class="syntax-hl">
          <code>
            //my JS code here

Я вижу, что при рендеринге он сохраняет все свои вкладки и перемещает вкладки всего блока кода (4) вместо ожидаемого результата только 1.

Я пытался применить различные настройки white-space, которые работают в том смысле, что они обрезают начальные пробелы, однако, когда они удаляют начальные пробелы, они также теряют все свои вкладки.

Кто-нибудь сталкивался с этим или знает, как это исправить?

Вот довольно скромный пример, с которым вы можете поиграть, который должен объяснить, что я пытаюсь исправить. https://jsfiddle.net/d3e26p0w/

1 Ответ

1 голос
/ 25 июня 2019

Одним из решений является перемещение border на pre, тогда вы можете дать code отрицательное левое поле. 

pre.syntax-hl {
  margin: 2rem;
  border: 1px solid red;
}

pre.syntax-hl > code {
  display: block;
  width: 100%;
  margin-left: -6ch;
}
<div class="one">
  <div class="two">
    <div class="three">
      <pre class="syntax-hl"><code>
        request.onload = function() {
          if (request.status >= 200 &amp;&amp; request.status &lt; 400) { 
            // Success! var data=JSON.parse(request.responseText); 
          } else { 
            //We reached our target server, but it returned an error 
          }
        };

Но, чтобы ответить на ваш вопрос, нет, отступ внутри блока <code> делаетне начинать с отступа родителя;в CSS нет никакого способа сделать отступ в зависимости от того, где находится <pre> на строке в источнике.

...