Это моё решение. Во-первых, Markdown, с отступом, чтобы он стал блоком кода:
|*|-language-css-|*|
.code {
color: red;
}
Обратите внимание на | * | - и - | * |. Я использую эти символы только для того, чтобы убедиться, что у меня есть что-то уникальное для последующего анализа.
Затем немного JavaScript (сейчас jQuery, я напишу его на JS для оптимизации):
$('pre code').each(function() {
var code = $(this).html(),
the_code = code.split('-|*|')[1].substring(1),
language = code.split('|*|-')[1].split('-|*|')[0];
$(this).html(the_code).addClass(language);
});
Вышеупомянутый JavaScript, как вы можете видеть, будет принимать все, что было внутри | * | - и - | * | и добавьте его как класс в элемент CODE. Изменить в соответствии с вашими потребностями.
Результат таков:
<pre>
<code class="language-css">
.code {
color: red;
}