Bootstrap4Markdown

一个Python-Markdown扩展，它提供了一个简单的语法，用于在Markdown文档中包含Bootstrap对象。

安装

要安装此扩展，请运行以下命令

pip install bootstrap4markdown

使用方法

要使用此扩展，请将其名称包含在传递给Python-Markdown的扩展列表中。

import markdown
markdown.markdown(src, extensions=['bs4md'])

请注意，此扩展仅生成支持Bootstrap组件所需的HTML。用户负责提供所使用的Bootstrap主题的必要CSS和JavaScript。生成的HTML假定使用Bootstrap版本5.3。

语法

Bootstrap4Markdown建立在Blocks扩展之上。因此，所有块都使用相同的基本形式。

/// name-of-block | argument
    option: value

content
///

因此，每个支持的Bootstrap对象都映射到以下定义的特定块名称。

警告

基于Bootstrap的警告可以使用名为alert的块进行定义。

/// alert
This is an alert.
///

可以使用块的参数定义标题（或标题）。

/// alert | Title
This alert has a title.
///

可以使用type选项更改警告的颜色。例如，设置type: warning将使用Bootstrap主题中的alert-warning样式。

/// alert | Warning
    type: warning

This is a **warning** alert with a title.
///

有效类型是Bootstrap上下文类字符串名称：primary、secondary、success、danger、warning、info、light和dark。

注意，警告的正文内容包含标准的Markdown内容。默认情况下，内容将被解析为一个单独的块（段落），并且只有内联级别的Markdown解析将应用于内容。然而，如果将markdown选项设置为block，则还将对内容应用块级别解析。

/// alert
    markdown: block

This alert contains two paragraphs of Markdown text.

This is the second paragraph.
///

如果将dismissable设置为true，则警告将包含一个关闭按钮。

/// alert
    dismissable: true

You can dismiss me!
///

最后，可以使用attrs选项为警告的外部元素定义额外的HTML属性。

/// alert
    attrs:
        id: mycustomid
        class: p-5

Custom padding is set for this alert using on of Bootstraps'
[spacing](https://bootstrap.ac.cn/docs/5.3/utilities/spacing/)
classes. (`p-5`).
///

选项

轮播图

可以使用两种类型的块定义基于Bootstrap的轮播图（或幻灯片）：外部的carousel块和幻灯片组件的单独slide块。

//// carousel

/// slide | image1.jpg
    alt: Slide one.
///

/// slide | image2.jpg
    alt: Slide two.
///

////

注意，所有slide块都必须嵌套在carousel块中。此外，请确保使用与子slide块不同的斜杠数来使用父carousel块。

轮播图块

外部carousel块用于定义适用于整个幻灯片的全局选项。

//// carousel
    attrs: {id: 'mycustomid'}
    controls: false
    indicators: true
    fade: true
    autoplay: carousel
    touch: false

...
////

请注意，Bootstrap要求每个轮播图都有一个唯一的id才能正确工作。如果没有在attrs中定义，则将生成一个随机的UUID字符串，并将其分配为轮播图的id。

幻灯片块

嵌套在carousel块中，每个幻灯片由一个slide块定义。幻灯片可以采用几种形式之一。最简单的形式是图像。

///
slide | path/to/image.jpg
    alt: Some alt text for the image.
///

请注意，图像的路径定义在参数中，alt文本在alt选项中。

图像幻灯片还可以定义一个标题，这是覆盖图像的文本。标题定义在图像的正文内容中。

///
slide | path/to/image.jpg
    alt: Some alt text for the image.

# Caption Title

Caption Body.
///

然而，如果没有提供参数，则正文内容将用作幻灯片的正文。在两种情况下，都会对正文内容应用Markdown处理。

/// slide
    attrs: {class: 'text-center pt-5 bg-primary-subtle text-primary-emphasis min-vh-100'}

# HTML Slide

Slide Body
///

请注意，在上面的幻灯片中设置了各种Bootstrap类。如Bootstrap文档所述

轮播图不会自动规范化幻灯片尺寸。因此，您可能需要使用额外的实用程序或自定义样式来适当地调整内容大小。

当然，也可以使用原始HTML。例如，以下幻灯片包含一个由SVG元素组成的幻灯片。

/// slide
    markdown: inline

<svg class="d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder" preserveAspectRatio="xMidYMid slice" focusable="false">
<title>Placeholder</title>
<rect width="100%" height="100%" fill="#777"></rect>
<text x="50%" y="50%" fill="#555" dy=".3em">SVG Slide</text>
</svg>
///

在上面的幻灯片中，markdown选项被设置为inline，这样svg就不会被包裹在一个Markdown段落中。但是，当使用块级别的原始HTML时，您将想要将内容缩进一个级别（4个空格），并将markdown选项设置为raw，以确保Markdown解析不会破坏您精心制作的HTML。

/// slide
    markdown: raw

    <h4>Title</h4>
    <p>Custom Body Content</p>
///

注意，如果设置了多个幻灯片为active: true，则实际上只有所有“活动”幻灯片中的第一个被设置为活动状态。如果没有明确设置任何幻灯片为活动状态，则默认将轮播中的第一个幻灯片设置为活动状态。

许可证

Python-Markdown的Bootstrap4Markdown扩展许可协议为MIT许可证，如LICENSE文件中所述。

变更日志

版本 0.1 (2023-03-07)

初始版本。包括对警告和轮播的支持。