Я хотел бы отображать фрагменты кода языка программирования, а также HTML-код внутри HTML-документа с использованием CSS. Я хочу, чтобы он был отступом и шрифтом с фиксированной шириной... Я думаю о чем-то вроде:
<blockquote style="some_style">
my code here
my code here also
</blockquote>
и он будет отображаться в хорошо отформатированном виде (бонус, если он закодирован цветом, но не обязательно должен быть.
Как я могу выполнить это с помощью CSS?
Делясь примером, который я использую на веб-сайте, я использую следующее pre в своей таблице стилей:
pre {
background: #f4f4f4;
border: 1px solid #ddd;
border-left: 3px solid #f36d33;
color: #666;
page-break-inside: avoid;
font-family: monospace;
font-size: 15px;
line-height: 1.6;
margin-bottom: 1.6em;
max-width: 100%;
overflow: auto;
padding: 1em 1.5em;
display: block;
word-wrap: break-word;
}
Это дает следующие результаты:
Отказ от ответственности: В свободное время я потратил несколько часов, чтобы обновить этот CSS с помощью дополнительных функций, таких как строки кода и кнопка "Копировать код", используя CSS с JavaScript для личного использования, которым я хотел бы поделиться. Пожалуйста, используйте github исходный код.
Эта библиотека javascript кажется превосходной:
UPDATE: Я также использовал это в своем блоге на основе Tumblr, потому что его проще всего развертывать:
https://github.com/google/code-prettify
и я также использовал этот (некоторые дополнительные функции):
<pre> автоматически сохранит ваши вкладки и разрывы строк в границах pre. Большинство браузеров автоматически по умолчанию используют моноширинный шрифт внутри pre, но если вы хотите его принудительно (это хорошая идея), вы можете использовать следующий CSS:
pre { font-family: monospace; }
Я бы порекомендовал вам не размещать код непосредственно в элементе <blockquote>. Это семантически некорректно.
Если вы хотите, чтобы ваш код был семантически правильным, вы должны пометить его следующим образом:
<pre><code>
My pre-formatted code
here.
</code></pre>
Если вы на самом деле "цитируете" блок кода, тогда разметка будет выглядеть следующим образом:
<blockquote><pre><code>
My pre-formatted "quoted" code here.
</code></pre></blockquote>
Если вам нужен еще более красивый код, вы можете использовать Google Code Prettify, который используемый StackOverflow для цветовых фрагментов кода. Он имеет собственные таблицы стилей, которые он автоматически импортирует на основе того, на каком языке он считает код, и соответствующим образом окрашивает код. Вы можете дать ему подсказку о том, на каком языке код находится добавление класса.
Ну, вы можете попробовать использовать <pre> тег в вашем блочном запросе, чтобы сначала сохранить форматирование, а затем использовать моноширинный шрифт, например курьером для стиля css.
Что-то вроде этого будет работать в css:
pre {
font-family: "Courier New"
Courier
monospace;
}
Вы можете взглянуть на prismjs, чтобы выделить код.
Вы можете настроить пакет по своему желанию из здесь, и площадь этого пакета будет по-прежнему минимальной.
Если у вас есть пакет, вы можете использовать его, как показано ниже:
<!DOCTYPE html>
<html>
<head>
...
<link href="themes/prism.css" rel="stylesheet" />
</head>
<body>
...
<script src="prism.js"></script>
</body>
</html>
После завершения вышеуказанной настройки вы можете использовать ее, как показано ниже:
<pre><code class="language-css">p { color: red }</code></pre>
Во-первых, я бы показал код в элементе <pre> </pre>, придавая элементу pre хороший стиль в вашем css и называя его днем.