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

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

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

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

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

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

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

источник

2016-10-09 Nic Aguirre

Что-то вроде [Markdown-it] (https://github.com/markdown-it/markdown-it)? Он даст вам проанализированный HTML-код, который вы можете отправить клиенту, если вы делаете это с серватом, или рендеринг с помощью jQuery или ванильного Javascript, если вы разыгрываете уценку на стороне клиента. Поскольку это обычный HTML, вы можете использовать любой CSS, который вам нравится. – tobloef

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

источник

2016-10-16 15:32:57

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

ответ

Смежные вопросы