Как мне показать фрагмент кода или блок кода с последующим примером кода?

Question

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

<p>Code Sample</p>
<code>
#p1 {font-family: Arial;}
</code>

Как мне затем отобразить рабочий пример кода под ним?

Answer 1

Вы не сможете отобразить этот вид кода на фактический HTML / CSS, используя только HTML / CSS.Вы можете попробовать использовать JavaScript для достижения этой цели, но ваш пробег может варьироваться, так как я раньше такого не делал.

Когда я писал статьи на HTML / CSS с примерами кода + рабочие примеры, как вы делаетеЯ использовал для написания style атрибуты, содержащие пример CSS, или образцы элементов стиля по ID, полностью вручную, но я не уверен, ищите ли вы такое решение.

Answer 2

StackOverflow использует простой набор тегов SPAN вокруг каждого элемента.Результирующая разметка очень чистая (и даже использует тег CODE), но я уверен, что логика ее анализа не проста.

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

1) Возможно, кто-то уже написал анализатор, который вы можете использовать.

2) Если у вас есть / приобретен навык, вы можете написать свой собственный.

Наконец,как сказал BoltClock, вы можете создать собственную разметку вручную для достижения желаемого эффекта.