Помощь CSS: как отформатировать блок кода и строку кода? - PullRequest
Новая
       0

Помощь CSS: как отформатировать блок кода и строку кода?

1 голос
/ 28 января 2012

Я заметил блок кода, который помечен 

<pre><code>this is my code block

и строка кода, которая помечается <code>this is code line, когда Markdown конвертируется в HTML.

Stack-overflow или Github реализовали такой стиль CSS. Итак, я взломал файл Github CSS: http://github.github.com/github-flavored-markdown/shared/css/documentation.css

Простое использование нижеследующего стиля не работает: 

code {
  font: 12px Monaco,"Courier New","DejaVu Sans Mono","Bitstream Vera Sans Mono",monospace;
  color: #52595d;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  border: 1px solid #ccc;
  background-color: #f9f9f9;
  padding: 0px 3px;
  display: inline-block;
  margin: 0px;
}


pre {
  border: 1px solid #cacaca;
  line-height: 1.2em;
  font: 12px Monaco,"Courier New","DejaVu Sans Mono","Bitstream Vera Sans Mono",monospace;
  padding: 10px;
  overflow:auto;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  background-color: #FAFAFB;
  color: #393939;
  margin: 0px;
}

Тестовый код HTML ниже: 

<body>
<p>This is <code>code</code> style.</p>

<pre><code>Dude, here is code line.
The second line.
signing off.

  • Если вы используете Git, вы можете добавить следующее настройки конфигурации, чтобы защитить ваш проект от линии Windows окончания, вползающие в: 

    ```$ git config --global core.autocrlf true```

Есть идеи?

Во-первых, спасибо всем. извините, я не понимаю два тега pre и code, а также не понимаю, как эти два тега отображаются на код уровня блока и встроенный код.

Для кода уровня блока для него используется тег <pre>, хотя <code> после <pre>, я должен написать pre { ... } один.

Для встроенного кода для него используется тег <code>, родительским тегом может быть <p>, <li>. поэтому я мог бы использовать элемент> селектор элемента , чтобы различать <pre><code>.

Примените их, теперь это работает.

Спасибо, Kuaf

Ответы [ 2 ]

2 голосов
/ 28 января 2012

Если ваша проблема различает <pre><code> и <code>, как вы говорите в комментарии, то решение состоит в том, чтобы использовать правило CSS вида 

pre code { /* declarations here */ }

для тех свойств, которые должныприменять к code только тогда, когда оно внутри pre.Там вы можете переопределить любые настройки в правиле, которое имеет только code как селектор.

1 голос
/ 28 января 2012

Попробуйте изменить code и pre на .code и .pre в css, а затем измените следующее: 

<body>
<p>This is <code>code</code> style.</p>

<span class="pre"><span class="code">Dude, here is code line.
The second line.
signing off.
</span></span>

<ul>
<li><p>If you&rsquo;re using Git you might want to add the following
configuration setting to protect your project from Windows line
endings creeping in:</p>

<span class="pre"><span class="code">```$ git config --global core.autocrlf true```
</span></span></li>
</ul>

</body>

Очень полезный, так как он позволяетничего по умолчанию.Это означает, что, изменив класс, вы можете отформатировать его так, как вы хотите, используя css

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...