Преобразование уценки в html с оглавлением с помощью Redcarpet

Моя цель - преобразовать документ уценки в html с оглавлением вверху. Я видел, что у Redcarpet есть опция HTML_TOC, что очень приятно. Но когда я его использую, он отображает только оглавление, а не остальную часть документа.

renderer = Redcarpet::Render::HTML_TOC.new(with_toc_data: true)
markdown = Redcarpet::Markdown.new(renderer)
html = markdown.render(File.read(input_file))

Как отобразить оглавление и сам документ на одной HTML-странице?

Единственное, что я могу придумать, это отобразить два отдельных HTML-объекта, а затем объединить их. Но это немного запутанно, потому что мне нужно правильно разобрать теги head/body перед их объединением. Есть ли способ лучше?


person wisbucky    schedule 08.04.2016    source источник


Ответы (1)


Единственное, что я могу придумать, это отобразить два отдельных HTML-объекта, а затем объединить их.

Это было бы именно то, что вам нужно сделать. Напоминаем, что Markdown в любом случае не отображает полный HTML-документ. Вы получаете только фрагмент HTML. Например, простой документ Markdown:

A simple Markdown document.

отображается как следующий фрагмент HTML:

<p>A simple Markdown document.</p>

Однако для полного, корректного HTML-документа вам необходимо (как минимум) следующее:

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <p>A simple Markdown document.</p>
  </body>
</html>

Учитывая, что вам все равно нужно все это сгенерировать, как это «грязно» получать оглавление и тело по отдельности?

На самом деле, в более сложных системах оглавление может находиться на боковой панели или где-то еще. Следовательно, используя систему шаблонов, оглавление можно в любом случае передать в шаблон отдельно, где оно затем помещается в контейнер, который отделяет его от тела документа для позиционирования и стилизации с помощью CSS.

Точный синтаксис шаблона может варьироваться в зависимости от того, какие инструменты вы используете, но, возможно, что-то вроде этого:

<!DOCTYPE html>
<html>
  <head>
    <title>{{ page.title }}</title>
  </head>
  <body>
    <aside>
      {{ page.toc }}
    </aside>
    <div id="body">
      {{ page.body }}
    </div>
  </body>
</html>

Конечно, вам не обязательно использовать шаблон, но это, безусловно, «чистый» способ создания документа.

person Waylan    schedule 08.04.2016
comment
Напоминаем, что Markdown в любом случае не отображает полный HTML-документ. Ах, это было ключом для меня! Я даже не осознавал, что redcarpet генерирует только фрагменты html, потому что я открыл преобразованный html-файл в Chrome и использовал инструменты разработчика для проверки html, но CDT добавил теги head/body. Теперь, когда я понимаю, что redcarpet генерирует html-фрагменты, их совсем несложно объединить. - person wisbucky; 08.04.2016