Группировка элементов Markdown в элементе div или пользовательской теги HTML -- html поле с участием markdown поле с участием jekyll пол Связанный проблема

Grouping MarkDown elements in to DIV element or Custom html tag


0
vote

проблема

русский

Я использовал Jeykll Tool для генерации контента отметки вниз в HTML.

Я хочу группировать ниже элементы отметки вниз в элемента Div или любой другой пользовательский тег HTML.

Отмечено вниз

 <код>  #Multiple Axis     {:.title}     Different types of data can be visualized in a single chart with the help of      {: .description}     It can be used when we need to compare the trends of different kinds of data.     {: .description}   

Выход HTML

 <код>   <h1 id="multiple-axis" class="title">Multiple Axis</h1>     <p class="description">Different typ`enter code here`es of data can be visualized in a single chart with the help of</p>     <p class="description">It can be used when we need to compare the trends of different kinds of data.</p>   

Как группировать вышеуказанную установку на элемент div или любой пользовательский тег, такой как это

 <код> <div class="">          <h1 id="multiple-axis" class="title">Multiple Axis</h1>         <p class="description">Different types of data can be visualized in a single chart with the help of</p>         <p class="description">It can be used when we need to compare the trends of different kinds of data.</p>            </div>   
Английский оригинал

I have used Jeykll tool to generate mark down content into HTMl .

I want to group the below mark down elements in to div element or any other custom Html tag.

Marked Down

 #Multiple Axis     {:.title}     Different types of data can be visualized in a single chart with the help of      {: .description}     It can be used when we need to compare the trends of different kinds of data.     {: .description} 

HTML Output

  <h1 id="multiple-axis" class="title">Multiple Axis</h1>     <p class="description">Different typ`enter code here`es of data can be visualized in a single chart with the help of</p>     <p class="description">It can be used when we need to compare the trends of different kinds of data.</p> 

How to group the above markdown into Div element or any custom tag like this

<div class="">          <h1 id="multiple-axis" class="title">Multiple Axis</h1>         <p class="description">Different types of data can be visualized in a single chart with the help of</p>         <p class="description">It can be used when we need to compare the trends of different kinds of data.</p>            </div> 
</div
        
   
   

Список ответов

3
 
vote
vote
Лучший ответ
 

Ответ зависит отчасти, на котором вы используете анализатор Markdown. Как это происходит, Jekyll поддерживает несколько разных разных Parsers Markdown . И вам может потребоваться установить некоторые параметры на парсере, который вы используете, чтобы включить соответствующие функции.

Вообще говоря, Markdown требует, чтобы вы использовали RAW HTML, чтобы получить Div. Как и Правила синтаксиса Объясните:

Реклама

не является заменой HTML или даже рядом с ним. Его синтаксис очень маленький, соответствующий только очень небольшому подмножеству HTML-тегов. Идея не должна создавать синтаксис, который облегчает вставку тегов HTML. На мой взгляд, теги HTML уже легко вставить. Идея Markdown - это легко прочитать, писать и редактировать прозу. HTML - это формат публикации; Markdown - это формат письма. Таким образом, синтаксис форматирования Markdown определяет только проблемы, которые могут быть переданы в простом тексте.

Для любой разметки, которая не охватывается синтаксисом Markdown, вы просто используете сам HTML.

Тем не менее, правила синтаксиса также утверждают:

Обратите внимание, что синтаксис форматирования отметки не обрабатывается в HTML-тегах уровня блока. E.G., вы не можете использовать стиль Markdown *emphasis* внутри блока HTML.

Другими словами, вам нужно будет определить весь диван и все в нем как RAW HTML. По сути, вам нужно будет скопировать желаемый вывод с вашего вопроса выше и вставить это в документ Markdown.

Тем не менее, некоторые анализаторы отметки добавили дополнительную функциональность, которая позволяет различными ярлыками. Например, кажется, что парсер, который вы используете поддерживает, поддерживает атрибуты различным частям документа, не возвращаясь к RAW HTML - что приводит меня к веществу, что вы, вероятно, используете Kramdown, который документировал поддержку списки атрибутов .

Как оказывается, Kramdown также включает в себя дополнительную поддержку для анализа контента Markdown внутри HTML блоки В то время как документы объясняют все варианты, основная идея заключается в том, что если вы устанавливаете атрибут markdown=1 на RAW HTML-тег, то содержимое этого тега будет проанализирован как HTML. Как это:

 <код> <div markdown=1> This will get parsed as *Markdown* content. </div>   

, что будет генерировать следующие данные HTML:

 <код> <div> <p>This will get parsed as <emphasis>Markdown</emphasis> content.</p> </div>   

Конечно, вы можете назначить класс на вашем Div. Поэтому вы итоговый документ будет выглядеть так:

 <код> <div class="someclass" markdown=1>  #Multiple Axis {:.title}  Different types of data can be visualized in a single chart with the help of  {: .description}  It can be used when we need to compare the trends of different kinds of data. {: .description}  #Multiple Axis {:.title}  Different types of data can be visualized in a single chart with the help of  {: .description}  It can be used when we need to compare the trends of different kinds of data. {: .description}  </div>   

Конечно, если вы используете другой анализатор Markdown, вам нужно будет проконсультироваться с помощью документации Parser, чтобы увидеть, поддерживает ли она аналогичной нестандартной функции.

 

The answer depends in part on which Markdown parser you are using. As it happens, Jekyll supports a few different Markdown parsers. And you may need to set some options on the parser you are using to enable the appropriate features.

Generally speaking, Markdown requires you to use raw HTML to get a div. As the Syntax Rules explain:

Markdown is not a replacement for HTML, or even close to it. Its syntax is very small, corresponding only to a very small subset of HTML tags. The idea is not to create a syntax that makes it easier to insert HTML tags. In my opinion, HTML tags are already easy to insert. The idea for Markdown is to make it easy to read, write, and edit prose. HTML is a publishing format; Markdown is a writing format. Thus, Markdown’s formatting syntax only addresses issues that can be conveyed in plain text.

For any markup that is not covered by Markdown’s syntax, you simply use HTML itself.

However, the syntax rules also state:

Note that Markdown formatting syntax is not processed within block-level HTML tags. E.g., you can’t use Markdown-style *emphasis* inside an HTML block.

In other words, you would need to define the entire div and everything in it as raw HTML. Essentially, you would need to copy your desired output from your question above and paste that into the Markdown document.

However, some Markdown parsers have added additional functionality which allows various shortcuts. For example, it appears that the parser you are using supports assigning attributes to the various parts of a document without falling back to raw HTML -- which leads me to believe that you are probably using Kramdown which has documented support for attribute lists.

As it turns out, Kramdown also includes optional support for parsing Markdown content inside HTML Blocks. While the docs explain all of the options, the basic idea is that if you set an attribute of markdown=1 on the raw HTML tag, then the content of that tag will be parsed as HTML. Like this:

<div markdown=1> This will get parsed as *Markdown* content. </div> 

Which would generate the following HTML output:

<div> <p>This will get parsed as <emphasis>Markdown</emphasis> content.</p> </div> 

Of course, you can then assign a class on your div as well. Therefore, you final document would look like this:

<div class="someclass" markdown=1>  #Multiple Axis {:.title}  Different types of data can be visualized in a single chart with the help of  {: .description}  It can be used when we need to compare the trends of different kinds of data. {: .description}  #Multiple Axis {:.title}  Different types of data can be visualized in a single chart with the help of  {: .description}  It can be used when we need to compare the trends of different kinds of data. {: .description}  </div> 

Of course, if you are using a different Markdown parser, you will need to consult that parser's documentation to see if it supports a similar non-standard feature.

</div
 
 

Связанный проблема

0  Динамический расчет расстояния для маршрута  ( Dynamic distance calculation for route ) 
Я хочу реализовать форму, где вы вводите отправку и пункт назначения, а затем, используя API Google Maps JavaScript, он будет отображать расстояние в виде зна...

1  Добавление события onload для GridView  ( Adding an onload event for a gridview ) 
У меня есть одна сетка, вот HTML-код: <код> <table cellspacing="0" border="1" style="border-collapse:collapse;" id="grid1" rules="all"> <tbody><t...

6  Предотвращение подачи двойной формы [дубликат]  ( Preventing double form submissions ) 
<в сторону CLASS = "S-NEWACTS S-WELTIVE__info JS-Post-New Imide MB16« Роль = «Статус»> Этот вопрос уже есть ответы здесь : ...

0  Конвертировать GNOME-HELP (YELP) XML в статический HTML с XSLT  ( Convert gnome help yelp xml to static html with xslt ) 
Некоторые из приложений GNOME на Linux используют браузер справки под названием <код> yelp . Например, Gnome-Calculator, <Код> gcalctool , имеет свои файлы сп...

31  Обнаружение первого и последнего элемента внутри Groovy каждая крышка {}  ( Detecting first and last item inside a groovy each closure ) 
Я использую Groovy's Handy Markupbuilder для создания HTML-страницы из различных исходных данных. Одна вещь, которую я изо всех сил пытаюсь сделать красиво,...

-1  Перемещение и переименование загруженного файла  ( Moving and renaming an uploaded file ) 
Извините, если это легко, но я немного нового для программирования, поэтому у меня проблемы с переименованием временного загруженного файла. Вот мой код: ht...

1  Удалить таблицу TR при сохранении AddClass  ( Remove table tr while maintaining addclass ) 
Хорошо, у меня есть таблица TR, которая удаляется, когда вы нажимаете кнопку. Я использую Animate.css и хотел бы добавить класс после того, как мой запрос AJA...

1  Как нажать на изображение, чтобы показать изображения с функцией  ( How to click on an image to show images with a function ) 
Попытка нажать на Magic8, но счастливые, грустные и удивленные картинки не будут отображаться ниже линии. Что я сделал не так? Я сохранил изображения в Random...

3  Как поставить DIV в центре другого дивы?  ( How to put a div at center of another div ) 
Я хотел бы иметь один div в центре другого div горизонтально. <код> <div id="container"> <div id="centered"> hello world; </...

0  Список списка с двумя столбцами в JSP  ( List box with two columns in jsp ) 
Коробка в списке с двумя столбцами в JSP, а также можно ли сортировать порядок двух столбцов, таких как восходящий или нисходящий, на основе требований каждог...

0  У меня проблема с переполнением моей контактной формы при отображении на мобильном  ( Im having an issue with my contact form overflowing when displayed on a mobile ) 
Выпуск в основном, когда у меня есть эта форма, отображаемая на мобильном телефоне, когда я перехожу на ввод текста в форму, Textarea слишком много расширяетс...

0  Как сделать раскрывающееся меню горизонтальное  ( How to make a drop down menu horizontal ) 
Я не уверен, что это возможно, но у меня есть кнопка, называемая фруктами. Когда я нажимаю на него, 4 фруктовые кнопки появляются вертикально вниз, но я хочу,...

0  Скрывая неупорядоченный список, когда у него нет элементов  ( Hiding an unordered list when it has no elements ) 
У меня есть проблема, которая кажется сначала, как общий язык No-Brainer и легкая задача. У меня есть плагин JavaScript на моей странице, который генерирует...

13  Отправьте данные FORM HTML в базу данных SQL через PHP (используя mysqli)  ( Send html form data to sql database via php using mysqli ) 
Я хочу отправить данные, введенные в HTML-форму в мою базу данных SQL, то есть создайте новую строку, приписываю определенные значения в определенные столбцы....

6  Нет прокрутки после закрытия лайтбокса (Blueimp)  ( No scrolling after closing lightbox blueimp ) 
Я построил свой собственный сайт и хотел добавить разные галереи, поэтому я попробовал Blueimp. Он отлично работает, но когда я закрываю лайтбокс, я больше не...

Связанный проблема

0  Динамический расчет расстояния для маршрута 
1  Добавление события onload для GridView 
6  Предотвращение подачи двойной формы [дубликат] 
0  Конвертировать GNOME-HELP (YELP) XML в статический HTML с XSLT 
31  Обнаружение первого и последнего элемента внутри Groovy каждая крышка {} 
-1  Перемещение и переименование загруженного файла 
1  Удалить таблицу TR при сохранении AddClass 
1  Как нажать на изображение, чтобы показать изображения с функцией 
3  Как поставить DIV в центре другого дивы? 
0  Список списка с двумя столбцами в JSP 
0  У меня проблема с переполнением моей контактной формы при отображении на мобильном 
0  Как сделать раскрывающееся меню горизонтальное 
0  Скрывая неупорядоченный список, когда у него нет элементов 
13  Отправьте данные FORM HTML в базу данных SQL через PHP (используя mysqli) 
6  Нет прокрутки после закрытия лайтбокса (Blueimp)