自定义div在html,将MarkDown元素分组到DIV元素或自定义html标记

答案部分取决于任何自定义标签您正在使用哪种Markdown分析器。碰巧,Jekyll支持一些不同的Markdown parsers。而且您可能需要在正在使用的解析器上设置一些选项以启用适当的功能。

一般来说,Markdown要求您使用原始HTML获取div。正如Syntax Rules所解释的:

Markdown不是HTML的替代品,甚至不接近它。它的语法非常小,仅对应于HTML标签的一小部分。这个想法并不是创建一个使插入HTML标签更容易的语法。在我看来,HTML标签已经很容易插入。 Markdown的理念是让阅读,编写和编辑散文变得容易。 HTML是一种发布格式; Markdown是一种书写格式。因此,Markdown的格式化语法只能解决以纯文本形式传达的问题。

对于Markdown语法未涉及的任何标记,您只需使用HTML本身。

但是,语法规则也状态:

注意,降价格式的语法不是块级别的HTML标签内处理。例如,您不能在HTML块中使用Markdown样式*emphasis*。

换句话说,您需要将整个div及其中的所有内容定义为原始HTML。实质上,您需要从上述问题中复制所需的输出,并将其粘贴到Markdown文档中。

但是,一些Markdown解析器添加了允许各种快捷方式的附加功能。例如,看来您使用的解析器支持将属性分配给文档的各个部分,而不会回退到原始HTML - 这使我相信您可能正在使用Kramdown,它已记录了对attribute lists的支持。

事实证明,Kramdown还包含对HTML Blocks内部解析Markdown内容的可选支持。虽然文档解释了所有选项,但基本思路是,如果您在原始HTML标记上设置了markdown=1的属性,那么该标记的内容将被解析为HTML。就像这样:

This will get parsed as *Markdown* content.

这会生成以下HTML输出:

This will get parsed as Markdown content.

当然,你就可以在你的股利分配一个类为好。因此,最后文件应该是这样的:

#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}

当然,如果你使用的是不同的降价解析器,您需要咨询该解析器的文档,看它是否支持类似非标准功能。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在使用第三方库将Markdown转换为HTML时,一般都会有一些默认的样式。如果你想要自定义样式,可以通过修改CSS样式表来实现。 以commonmark-java为例,它提供了一个默认的CSS样式表,可以在输出HTML文件中引用该样式表。如果你想要自定义样式,可以编写自己的CSS样式表,并将其引用到HTML文件中。 以下是一个例子,演示如何使用自定义CSS样式表: ```java import org.commonmark.node.*; import org.commonmark.parser.*; import org.commonmark.renderer.html.HtmlRenderer; import java.io.*; public class MarkdownToHtml { public static void main(String[] args) throws IOException { // 读取Markdown文件 String markdown = readFile("input.md"); // 解析Markdown文件 Parser parser = Parser.builder().build(); Node document = parser.parse(markdown); // 渲染为HTML文件 HtmlRenderer renderer = HtmlRenderer.builder() .softbreak("<br/>") // 设置换行符 .attributeProviderFactory(context -> new CustomAttributeProvider()) // 设置自定义属性 .build(); String html = renderer.render(document); // 引用自定义CSS样式表 String css = readFile("style.css"); html = "<html><head><style>" + css + "</style></head><body>" + html + "</body></html>"; // 写入HTML文件 writeFile("output.html", html); } private static String readFile(String path) throws IOException { BufferedReader reader = new BufferedReader(new FileReader(path)); StringBuilder stringBuilder = new StringBuilder(); String line = null; while ((line = reader.readLine()) != null) { stringBuilder.append(line).append("\n"); } reader.close(); return stringBuilder.toString(); } private static void writeFile(String path, String content) throws IOException { BufferedWriter writer = new BufferedWriter(new FileWriter(path)); writer.write(content); writer.close(); } private static class CustomAttributeProvider implements AttributeProvider { @Override public void setAttributes(Node node, String tagName, Map<String, String> attributes) { // 添加自定义class属性 if (node instanceof Heading) { attributes.put("class", "my-heading"); } else if (node instanceof Code) { attributes.put("class", "my-code"); } } } } ``` 这段代码会将当前目录下的`input.md`文件转换为HTML,并输出到`output.html`文件中。同时,它会读取当前目录下的`style.css`文件,将其内容作为样式表引用到HTML文件中。在CSS样式表中,你可以编写自己的样式规则,比如修改标题的颜色、字体大小等。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值