程序员经验分享-hwhale

【MarkDown】CSDN Markdown之时间轴图timeline详解

2023-11-01

时间轴图

时间轴图：现在这是一个实验性的图表。语法和属性可能会在未来版本中更改。除了图标集成，它是实验部分外，语法是稳定的。

“通过互联网技术，依据时间顺序，把一方面或多方面的事件串联起来，形成相对完整的记录体系，再运用图文的形式呈现给用户；时间轴可以运用于不同领域，最大的作用就是把过去的事物系统化、完整化、精确化。
通过记录生活、记录文化、记录历史，来实现自己传承文化的梦想。时间轴正是实现梦想的基础。想要传承，必须先有系统、完整的记录。而时间轴就是依据文化分类和时间把事物归类和排序，以最适合的形态展示给用户。记录年华岁月中的故事，让时间和空间不再是我们的障碍，只需一条线，就能够回到从前。”              — 百度百科

以下所有例子都是在 mermaid v10.2.3 进行测试，CSDN 当前使用 mermaid v8.14.0 不支持此语法

一个关于时间轴图的例子

代码:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Mermaid 时间轴图</title>
  <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.js"></script>
</head>
<body>
  <pre class="mermaid">
    timeline
    title 社交媒体平台的历史
    1999 : QQ
    2011 : 微信
         : 快手
    2011 : 微信
    2013 : 小红书
</pre>
  <script>
  const config = {
    startOnLoad: true,
    securityLevel: 'loose',
  };
  mermaid.initialize(config);
</script>
</body>
</html>

在这里插入图片描述

语法

创建时间轴图的语法很简单。您始终从timeline关键字开始，以让mermaid知道您要创建时间轴图。

之后有可能添加标题到时间轴图上。通过添加一个以关键字 title 开头后面跟着标题文本的行来完成。

然后加入时间轴图数据，它总是从一个时间段开始，然后是一个:冒号，然后是事件文本。
可选的，您可以添加第二个:冒号，然后是事件文本。因此，您可以每个时间段拥有一个或多个事件。

{时间段} : {事件文本}

或

{时间段} : {事件文本} : {事件文本}

或

{时间段} : {事件文本}
              : {事件文本}
              : {事件文本}

注意： 时间段和事件文本均为简单文本，不仅限于数字。

让我们看一下上述示例的语法。

代码:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Mermaid 时间轴图</title>
  <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.js"></script>
</head>
<body>
  <pre class="mermaid">
    timeline
    title 社交媒体平台的历史
    1999 : QQ
    2011 : 微信
         : 快手
    2011 : 微信
    2013 : 小红书
</pre>
  <script>
  const config = {
    startOnLoad: true,
    securityLevel: 'loose',
  };
  mermaid.initialize(config);
</script>
</body>
</html>

在这里插入图片描述

通过这样的方式，我们可以使用文本来生成时间轴图。时间段和事件的顺序很重要，因为它将用于绘制时间轴图。第一个时间段将放置在时间轴图的左侧，而最后一个时间段将放置在时间轴图的右侧。

同样地，特定时间段的第一个事件将放置在顶部，而最后一个事件将放置在底部。

分组

你可以把时间段分配在不同的分组中。这是通过添加一个以关键字 section 开头后面跟着分组名称来完成定义的。

所有随后的时间段将被放置在此分组中，直到定义一个新的分组。

如果没有定义分组，则所有时间段将被放置在默认分组中。

让我们看一个示例，其中我们已经将时间段分配到不同的分组中。

代码:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Mermaid 时间轴图</title>
  <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.js"></script>
</head>
<body>
  <pre class="mermaid">
    timeline
    title 工业革命时间轴图
    section 17世纪到20世纪
        工业 1.0 : 机械、水力和蒸汽 动力
        工业 2.0 : 电力、内燃机、大规模生产
        工业 3.0 : 电子、计算机、自动化
    section 21世纪
        工业 4.0 : 互联网、机器人、物联网
        工业 5.0 : 人工智能、大数据、3D打印
</pre>
  <script>
  const config = {
    startOnLoad: true,
    securityLevel: 'loose',
  };
  mermaid.initialize(config);
</script>
</body>
</html>

在这里插入图片描述

正如您所看到的，时间段位于分组中，分组按照定义的顺序排列。

给定分组下的所有时间段和事件都遵循类似的颜色方案。这样做是为了更容易地看到时间段和事件之间的关系。

长时间段或事件文本换行

默认情况下，如果时间段和事件文本过长，则需要将其换行。这是为了避免文本绘制在图表之外。

您还可以使用<br>强制换行。

让我们看另一个示例，其中我们有一个长时间段和一个长事件。

代码:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Mermaid 时间轴图</title>
  <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.js"></script>
</head>
<body>
  <pre class="mermaid">
    timeline
        title 中国历史时间轴图
        section 石器时代
          公元前7000年 : 以华南的洞穴遗址和贝丘 遗址为主，有少量磨制石 器和陶器，农业已有萌芽 ，个别地点 已会养猪。
          公元前5000年 : 华北的磁山文化等已有较 发达的旱地农业，种植粟 、黍，养猪，并有较发达 的磨制石器和陶器；华中 的彭头山文化（见彭头山 遗址）等已栽植水稻，养 猪和水牛等，磨制石器尚 不多见，陶器则比较发达。
        section 青铜时代
          公元前2080年 : 出现了品类繁杂的青铜制 品，在一些墓葬中还发现 了人殉和人牲。
                       : 青铜器数量大增，常伴有 成套礼器,贝币大量出现 ，人殉、人牲更为普遍
          公元前1300年 : 青铜铸造工艺相当成熟， 出土大量的精美青铜礼器 、武器与工具 。<br>  西周的周原遗址和丰镐遗 址中，发掘出周王朝的宫 殿 、宗庙和墓 葬，发现 了大量的青铜礼器，反映 出中国古代社会的礼制已 成熟。
                    :   青铜铸造工艺取得突出发 展，出现了分铸法、失蜡 法等先进工艺技术。
</pre>
  <script>
  const config = {
    startOnLoad: true,
    securityLevel: 'loose',
  };
  mermaid.initialize(config);
</script>
</body>
</html>

在这里插入图片描述

代码:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Mermaid 时间轴图</title>
  <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.js"></script>
</head>
<body>
  <pre class="mermaid">
    timeline
    title 微信2023更新时间轴图
    section 2023 微信iOS平台&ensp; &ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp; 更新记录
      版本 1 : v8.0.33 : v8.0.34
           : v8.0.37
      功能 2 : 微信110 : 问一问
    section 2023 微信安卓平台&ensp; &ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp; 更新记录
      版本 3 : v8.0.34 : v8.0.35
           : v8.0.37 
      功能 4 :  微信110 : 问一问
</pre>
  <script>
  const config = {
    startOnLoad: true,
    securityLevel: 'loose',
  };
  mermaid.initialize(config);
</script>
</body>
</html>

在这里插入图片描述

时间段和事件文本样式

如前所述，每个部分都有一个颜色方案，并且每个时间段和事件文本在该分组下遵循相似的颜色方案。

但是，如果没有定义分组，则有两种可能性：

单独为时间段设置样式，即每个时间段（及其对应的事件文本）将有自己的颜色方案。这是默认的行为。
代码:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Mermaid 时间轴图</title>
  <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.js"></script>
</head>
<body>
  <pre class="mermaid">
    timeline
    title 社交媒体平台的历史
      1999 : QQ
      2009 : 微博 : B站
      2011 : 微信
      2013 : 小红书
</pre>
  <script>
  const config = {
    startOnLoad: true,
    securityLevel: 'loose',
  };
  mermaid.initialize(config);
</script>
</body>
</html>

在这里插入图片描述

注意 没有定义任何分组，每个时间段及其相应的事件文本都有自己的颜色方案。

使用 disableMulticolor 选项禁用多颜色选项。这将使所有时间段和事件遵循相同的颜色方案。你需要通过mermaid.initialize函数或指令添加这个选项。

mermaid.initialize({
        theme: 'base',
        startOnLoad: true,
        logLevel: 0,
        timeline: {
          disableMulticolor: false,
        },
        ...
        ...

让我们看一个相同的示例，其中禁用了多颜色选项。

代码:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Mermaid 时间轴图</title>
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css">
  <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
</head>
<body>
    <!--%%{init: { 'logLevel': 'debug', 'theme': 'base', 'timeline': {'disableMulticolor': true}}}%%-->
  <div class="mermaid">
timeline
title 社交媒体平台的历史
  1999 : QQ
  2009 : 微博 : B站
  2011 : 微信
  2013 : 小红书
</div>
<script>
  const config = {
    startOnLoad: true,
    securityLevel: 'loose',
    logLevel:'debug',
    theme:"base",
    timeline:{
      disableMulticolor:true
    }
  };
  mermaid.initialize(config);
</script>
</body>
</html>

在这里插入图片描述

自定义颜色方案

您可以使用cScale0到cScale11主题变量自定义颜色方案。Mermaid允许您为最多12个分组设置独特的颜色，其中cScale0变量将设置第一个部分或时间段的值，cScale1变量将设置第二个部分的值，以此类推。如果您有超过12个部分，则颜色方案将开始重复。

注意：这些主题变量的默认值是从选择的主题中选取的。如果要覆盖默认值，则可以使用mermaid.initialize调用添加自定义主题变量值。

示例:

现在让我们覆盖cScale0到cScale2变量的默认值：

代码:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Mermaid 时间轴图</title>
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css">
  <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
</head>
<body>
    <!--%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
              'cScale0': '#ff0000',
              'cScale1': '#00ff00',
              'cScale2': '#0000ff'
       } } }%%-->
  <div class="mermaid">
timeline
title 社交媒体平台的历史
  1999 : QQ
  2009 : 微博 : B站
  2011 : 微信
  2013 : 小红书
</div>
<script>
  const config = {
    startOnLoad: true,
    securityLevel: 'loose',
    logLevel:'debug',
    theme:"default",
    themeVariables:{
      cScale0:'#ff0000',
      cScale1:'#00ff00',
      cScale2:'#0000ff'
    }
  };
  mermaid.initialize(config);
</script>
</body>
</html>

在这里插入图片描述

看看颜色如何更改为主题变量中指定的值。

主题

Mermaid支持一堆预定义的主题，您可以使用它们来找到适合您的主题。 PS：您实际上可以覆盖现有主题的变量以获得自己的自定义主题。在这里了解更多有关主题渲染您图表的信息。

以下是不同的预定义主题选项：

  • base
  • forest
  • dark
  • default
  • neutral

注意：要更改主题，您可以使用mermaid.initialize调用或指令。在这里了解更多关于指令的内容。让我们看看不同的主题下的效果：

基础主题

代码:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Mermaid 时间轴图</title>
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css">
  <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
</head>
<body>
    <!--%%{init: { 'logLevel': 'debug', 'theme': 'base' } }%%-->
  <div class="mermaid">
    timeline
        title 社交媒体平台的历史
          1999 : QQ
          2003 : 百度贴吧
          2009 : 微博 : B站
          2011 : 微信
          2013 : 小红书
          2016 : 抖音
          2017 : TikTok
</div>
<script>
  const config = {
    startOnLoad: true,
    securityLevel: 'loose',
    logLevel:'debug',
    theme:"base"
  };
  mermaid.initialize(config);
</script>
</body>
</html>

在这里插入图片描述

森林主题

代码:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Mermaid 时间轴图</title>
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css">
  <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
</head>
<body>
    <!--%%{init: { 'logLevel': 'debug', 'theme': 'forest' } }%%-->
  <div class="mermaid">
    timeline
        title 社交媒体平台的历史
          1999 : QQ
          2003 : 百度贴吧
          2009 : 微博 : B站
          2011 : 微信
          2013 : 小红书
          2016 : 抖音
          2017 : TikTok
</div>
<script>
  const config = {
    startOnLoad: true,
    securityLevel: 'loose',
    logLevel:'debug',
    theme:"forest"
  };
  mermaid.initialize(config);
</script>
</body>
</html>

在这里插入图片描述

黑色主题

代码:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Mermaid 时间轴图</title>
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css">
  <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
</head>
<body>
    <!--%%{init: { 'logLevel': 'debug', 'theme': 'dark' } }%%-->
  <div class="mermaid">
    timeline
        title 社交媒体平台的历史
          1999 : QQ
          2003 : 百度贴吧
          2009 : 微博 : B站
          2011 : 微信
          2013 : 小红书
          2016 : 抖音
          2017 : TikTok
</div>
<script>
  const config = {
    startOnLoad: true,
    securityLevel: 'loose',
    logLevel:'debug',
    theme:"dark"
  };
  mermaid.initialize(config);
</script>
</body>
</html>

在这里插入图片描述

默认主题

代码:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Mermaid 时间轴图</title>
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css">
  <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
</head>
<body>
    <!--%%{init: { 'logLevel': 'debug', 'theme': 'default' } }%%-->
  <div class="mermaid">
    timeline
        title 社交媒体平台的历史
          1999 : QQ
          2003 : 百度贴吧
          2009 : 微博 : B站
          2011 : 微信
          2013 : 小红书
          2016 : 抖音
          2017 : TikTok
</div>
<script>
  const config = {
    startOnLoad: true,
    securityLevel: 'loose',
    logLevel:'debug',
    theme:"default"
  };
  mermaid.initialize(config);
</script>
</body>
</html>

在这里插入图片描述

中性主题

代码:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Mermaid 时间轴图</title>
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css">
  <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
</head>
<body>
    <!--%%{init: { 'logLevel': 'debug', 'theme': 'neutral' } }%%-->
  <div class="mermaid">
    timeline
        title 社交媒体平台的历史
          1999 : QQ
          2003 : 百度贴吧
          2009 : 微博 : B站
          2011 : 微信
          2013 : 小红书
          2016 : 抖音
          2017 : TikTok
</div>
<script>
  const config = {
    startOnLoad: true,
    securityLevel: 'loose',
    logLevel:'debug',
    theme:"neutral"
  };
  mermaid.initialize(config);
</script>
</body>
</html>

在这里插入图片描述

与库或网站集成

时间轴图使用实验性的延迟加载和异步渲染功能，这些功能在未来可能会更改。延迟加载非常重要，以便能够在未来添加其他图表。

您可以使用以下方法将Mermaid及其时间轴图表添加到网页中：

<script type="module">
  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
</script>

您还可以在此处参考实现，以了解如何完成异步加载。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

语言排版

Timeline

时间轴图

markdown

时间轴

【MarkDown】CSDN Markdown之时间轴图timeline详解 的相关文章

  • 以富文本形式 Markdown 到剪贴板

    在 Windows 上使用 Python 我尝试获取一个 Markdown 文件并将其作为富文本粘贴到我的剪贴板中 大部分拼图都很简单 将 Markdown 解析为 HTML 没有问题 通过 TKinter 将内容放入剪贴板 是的 但这是我

  • 检测python中markdown文件中的所有链接并将其替换为字符串函数的输出

    我有一个 python 函数f foo string gt string 我不写该函数的详细信息 因为它可能会发生变化 我需要得到all来自 Markdown 文件的链接并将其替换为该函数的结果 示例 此链接 This is a text

  • 如何在 Sublime Text Markdown 预览中启用 MathJax 渲染

    我正在使用 Sublime Text 3 编写一个包含数学的 Markdown 文档 Markdown Preview 包可以在浏览器 Chrome 中实时渲染文档 所以当我写这篇文章时 变化是显而易见的 以下是我的 Markdown 文本

  • 如何在 Slidify 中使用 MathJax？

    似乎只需声明即可widget mathjax在扉页中 但我无法正确呈现公式 有什么遗漏的吗 谢谢 UPDATE 我查了一下最终结果index html 发现很多 都变成了 em or em 似乎 slideify 正在混合 在 LaTeX

  • 如何在 tkinter 中显示 markdown 格式文本？

    In python 3 x with tkinterGUI 我开发了一个带有常规简单窗口的程序 我想展示一个markdown格式字符串保存在名为的字符串中markdownText在程序窗口上 markdownText italic or b

  • 如何在 Bitbucket wiki 上的 Markdown 中转义“@”

    谁知道如何逃脱 BitBucket wiki 上 markdown 中的字符 就我而言 后面紧跟着恰好是某人的用户名的单词 即 blahblah 到目前为止我尝试过的 64 但这些都不起作用 屏蔽被忽略 当我使用字符代码时 它只是按原样输出

  • Pandoc Filter 为链接添加脚注

    我只是想问是否有人知道 Pandoc 的一个简短过滤器 可以自动向任何链接添加脚注 我只想在我的打印文档中有可读的链接源 所以为了指定 我想从 link url 对于类似的东西 link url link url 因此 在打印的 PDF 中

  • 如何在在线编辑器中查看在线 Markdown 文档 [关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我有一个在线 Markdown 文档 例如 www example com README md 我想要

  • PHP 替换，但替代替换字符串

    好的 这就是我想做的 我正在尝试使用 PHP 来开发本质上是tinyMarkdown 实现的子集 不值得使用完整的 Markdown 类 我本质上需要执行 str replace 但每次出现针时都会交替替换替换字符串 以便处理开始和结束 H

  • Markdown 所见即所得编辑器和预览在同一文本区域中[关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我寻找一个编辑器来编写 Markdown 语法并在同一文本区域中预览 例如引导所见即所得HTML5 ht

  • 如何在 VS TextMateRules 中将标记设为粗体+斜体

    在 Visual Studio Code 中 我编辑 Markdown 文件 在编辑器中标记的文本 bold 被渲染bold以及标记的那个 italic 呈现在italic 但文字标记 bold and italic 简单地呈现为itali

  • 您可以将文本文件中的信息导入/引用到 Markdown 文件中吗？

    我找不到这方面的示例 但是是否可以通过引用将文本导入到 Markdown 文件中 例如 假设我有我的README md Markdown 可以导入吗somefile txt进入自述文件 就像图像参考一样 简单回答 不 Markdown 不支

  • 如何在knitr中安装软件包？

    到目前为止 我一直在使用这段代码来加载 R 包并编写 R 文件 但我正在尝试使用knitr rm list ls all TRUE kpacks lt c ggplot2 install github devtools mapdata ne

  • 在`rmarkdown`中，如何在句子中添加图标？

    In rmarkdown 如何在句子中添加图标 例如如下 如何添加markdown icon单词 Markdown 和 is 之间 有一个很好的 R 包 可以轻松下载 RMarkdown 文档并将图标添加到其中 icons https gi

  • Pandoc Markdown 分页符

    最近我开始使用 Pandoc markdown 它似乎是 LaTeX 的一个很好的替代品 因为我的文档没有很多数学公式 而且我没有任何使用 LaTeX 的经验 再加上不到 2 周的提交截止日期 这使它成为一个很好的解决方案 我无法解决的一件

  • 带 Markdown 的两栏布局

    我正在编写并排文本 我必须用两列布局来准备这个 例如 一列包含英文文本 其他列 右列包含前面 英文 文本的翻译 Markdown 不支持表格标记 但 Github Flavored Markdown 支持 我做了一些尝试 但不幸的是无法解决

  • 从 HTML 转换为 Markdown 时阻止 Pandoc 转义单引号

    如果我转换单引号 从 HTML 到 Markdown 它会自动转义 echo pandoc f html t markdown 我希望它输出时不带斜杠 因为它使带有缩写的文本更难以阅读 我认为这可能是由于 all symbols escap

  • 更改 Google Colab Markdown 文本中的字体样式

    这可以改变 Colab 中 Markdown 的字体样式吗 我编写了这段 CSS 代码 但由于它不起作用 我不知道如何使用它 或者是否可能 该代码完美地工作在html文件但无法在 Colab 上运行

  • 在 Markdown 中添加文本和图像之间的空格

    在 Markdown 中 您将图像添加为 myimg link 现在 我可以使用以下属性轻松更改所述图像的大小和位置 myimg link height 75px width 300px align left 我怎样才能使图像和文本之间也有

  • markdown - 我可以有下划线而不转义它们并且没有 markdown 斜体吗？

    我想要其中包含下划线的文本 它不是代码 所以我不想使用代码格式 我想停止将 Markdown 视为指令斜体化 it 我可以转义 每个下划线 看 但我总共有 20 个 在源代码中看起来很丑 很难维护 而且不是很干燥 还有其他选择吗 一些 Ma

随机推荐

  • flutter loading前一个界面关闭后一个界面的loading

    import package flutter cupertino dart import package flutter material dart import package flutter easyloading flutter ea

  • H5 架构和原生架构的区别

    1 App 的 3 种开发方式 表面上看 手机 App 都是同样的东西 就是手机上的应用程序 点击图标就能运行 但是它们的底层技术不一样 按照开发技术 App 可以分成三大类 原生应用 简称 nativeApp Web 应用 简称 WebA

  • 阿里云轻量应用服务器mysql远程连接教程

    阿里云轻量应用服务器mysql远程连接教程 打开轻量应用服务器控制台 打开防火墙 点击添加规则 打开服务器命令行 可以使用Xshell等软件 在阿里云控制台开放3306端口后后在linux系统中也要开放3306端口 在服务器中开放防火墙33

  • esp32搭建lvgl

    platformio 下载两个库 TFT eSPI lv arduino 3 0 1对应lvgl 7 2 7 5对应lvgl6 pio libdeps tft espi user Setup h 驱动芯片选择 颜色顺序 分辨率选择 不同芯片

  • Nginx反向代理配置流式响应

    Nginx 是通过缓存响应内容来处理请求的 也就是说 当 Nginx 接收到完整的响应后 才会将其发送给客户端 所以默认不支持流式响应 这里讲讲 Nginx 反向代理中怎么配置流式响应 一 使用背景 最近使用 Egg js 搭建自动化部署服

  • MyEclipse提示过期,MyEclipse Subscription Expired解决方案

    一 错误描述 某一天打开MyEclipse 突然发现出现如下提示框 1 错误日志 Thank you for choosing MyEclipse Your license expired 1091 days ago To continue

  • @Valid和@Validated在service层的应用及问题汇总

    1 背景 实际开发中 很多时候要对参数校验 比如为空等 除了要在接口的入口处使用 很多普通方法也需要检查 比如service方法 那么如何在service上使用这个参数校验呢 2 使用方式 步骤一 在service接口上加上 Validat

  • [CF1149C](Tree Generator)

    题意 给出一颗树的括号序 有m个操作 每次交换两个括号 保证交换后括号序仍然合法 输出每次操作后 包括未操作时 树的直径 solution 首先转化题目 对于一棵树的括号序 我们找到一段子串 满足将其中匹配的括号消去后剩下的括号最多 那么剩

  • STM32 Flash操作（擦写）过程中器件复位导致数据丢失问题

    1 问题描述 产品在运行过程中需要保存一些断电不丢失的数据 为此将数据保存在STM32内部的flash中 但是测试人员在测试的过程中 修改了数据参数 直接断电重启机器 并没有等待flash的操作时间 导致原有的数据丢失 2 原理分析 本产品

  • 理解准确率(accuracy)、精度(precision)、查全率(recall)、F1

    Precision又叫查准率 Recall又叫查全率 这两个指标共同衡量才能评价模型输出结果 TP TN FP FN的定义 在二分类问题中 Real 1 Real 0 Predict 1 TP FP Predict 0 FN TN TP 预

  • 记录用Anaconda搭建Tensorflow1.13环境

    上文才搭建好了Pytorch环境 这次获得了一篇论文源码 其中用到的是Tensorflow环境 为了复现论文结果 只好再搭建一个Tensorflow环境 首先论文中给出的环境信息是 Tensorflow 1 13 以及 Python 3 这

  • [第六篇]——云服务器之Spring Cloud直播商城 b2b2c电子商务技术总结

    云服务器 云服务器 Elastic Compute Service ECS 是一种简单高效 安全可靠 处理能力可弹性伸缩的计算服务 云服务器管理方式比物理服务器更简单高效 我们无需提前购买昂贵的硬件 即可迅速创建或删除云服务器 云服务器费用

  • flutter强制横屏竖屏设置

    void main 强制横屏 SystemChrome setPreferredOrientations DeviceOrientation landscapeLeft DeviceOrientation landscapeRight ru

  • Latex 约等于符号

    approx

  • 深入理解Python 中的特殊常量None

    False 不同 它不表示 0 也不表示空字符串 而表示没有值 也就是空值 None 有自己的数据类型 我们可以在 IDLE 中使用 type 函数查看它的类型 执行代码如下 gt gt gt type None

  • LangChain 中文入门教程

    文章目录 LangChain 中文入门教程 一 介绍 1 1 背景 1 2 基础功能 二 必知概念 2 1 Loader 加载器 2 2 Document 文档 2 3 Text Spltters 文本分割 2 4 Vectorstores

  • 语音中的 Transformer一文打尽！

    写在前面 自 2017 年 Transformer 技术出现以来 便在 NLP CV 语音 生物 化学等领域引起了诸多进展 知源月旦团队期望通过 Transformer X 梳理清 Transformer 技术的发展脉络 以及其在各领域中的

  • BigQueue：The Architecture and Design of a Publish & Subscribe Messaging System Tailored for Big Data

    The Architecture and Design of a Publish Subscribe Messaging System Tailored for Big Data Collecting and Analytics MAR 2

  • stm32USART使用（库函数）

    1 定义GPIO端口 串口USART 中断NVIC初始化结构体 2 打开相关外设时钟 串口1的时钟和引脚都在APB2总线上所以可以直接 操作 如下 3 给GPIO结构体成员赋值 设置引脚功能 此处用的是USART1 Tx是PA9 Rx是PA

  • 【MarkDown】CSDN Markdown之时间轴图timeline详解

    文章目录 时间轴图 一个关于时间轴图的例子 语法 分组 长 时间段 或 事件文本 换行 时间段 和 事件文本 样式 自定义颜色方案 主题 基础主题 森林主题 黑色主题 默认主题 中性主题 与库或网站集成 时间轴图 时间轴图 现在这是一个实验

热门标签