Блог

Главная - Вопросы по программированию - Как я могу динамически анализировать markdown в JavaScript и использовать пользовательский стиль CSS?

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

#javascript #css #markdown #styling #bootswatch

#javascript #css #markdown #стиль #bootswatch

Вопрос:

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

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

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

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

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

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

Комментарии:

1. Как насчет чего-то вроде Markdown-it ? Это даст вам проанализированный HTML, который вы можете либо отправить клиенту, если вы делаете это на стороне сервера, либо визуализировать с помощью jQuery или ванильного Javascript, если вы анализируете markdown на стороне клиента. Поскольку это обычный HTML, вы можете использовать любой CSS, который вам нравится.

Ответ №1:

Я нашел более элегантный подход, используя 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>

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