Как я могу динамически анализировать уценку в JavaScript и использовать собственные стили CSS?

Question

Как я могу динамически анализировать уценку в JavaScript и использовать собственные стили CSS?

Я хочу использовать такой сервис, как StrapdownJS, для создания HTML-страниц, написанных на Markdown. StrapdownJS хорошо работает как анализатор Markdown, однако он не удовлетворяет моим требованиям к пользовательскому стилю. В strapdownJS вы выбираете тему примерно так:

<xmp theme="united">
    # Markdown here...
</xmp>

Тем не менее, встраивание <link> или же <style> тег в <head> не работает, так как StrapdownJS выполняет всю стилизацию ПОСЛЕ загрузки головы. Пока единственное решение, которое я могу придумать, - это программно изменить все стили с помощью чего-то вроде JQuery, что в значительной степени противоречит цели создания таблиц стилей в первую очередь.

У кого-нибудь есть хорошее решение для этого? Мое идеальное решение будет выглядеть примерно так

использование <link> включить таблицу стилей CSS
указать файл уценки (например, content.md)
Markdown анализируется и отображается как HTML со стилем style.css

Пожалуйста, дайте мне знать, если есть что-нибудь подобное. Опять же, StrapdownJS был бы идеален, если бы не его чрезвычайно ограниченный выбор тем - он имеет только несколько тем из Bootswatch.

1

javascript css markdown styling bootswatch

Источник

user1269733 09 окт '16 в 13:35

1 ответ

Другие вопросы по тегам javascript css markdown styling bootswatch

user1269733 16 окт '16 в 15:32 2016-10-16 15:32 · Answer 1 · 2016-10-16 15:32

Я нашел более элегантный подход с использованием MarkedJS.
Все, что вам нужно сделать, это импортировать вашу таблицу стилей вместе с MarkedJS.

Дано:

dir
 |- style.css
 |- marked.js
 |- jquery.min.js
 |- content.md
 |- index.html

HTML:

<head>
    <link href="style.css" rel="stylesheet">
    <script src="marked.js"></script>
    <script src="jquery.min.js"></script>
</head>
<body>
    <div id="content"></div>
    <script>
         $.get('content.md', function(data) {
            $('#content').html(marked(data));
        }, 'text');
    </script>
<body>

Это оказалось именно тем, что я искал; Я могу хранить уценку в отдельном файле и анализировать ее динамически, придерживаясь своих собственных стилей. Конечно, вы можете сделать это без JQuery, но я предпочитаю такой подход.