如何使用 GitHub README 中的 Markdown 渲染多列?

2024-04-29

为了呈现三列中的项目,我尝试将以下 CSS3 指令添加到我的项目中README.md文件,但样式被删除:

<div style="-webkit-column-count: 3; -moz-column-count: 3; column-count: 3; -webkit-column-rule: 1px dotted #e0e0e0; -moz-column-rule: 1px dotted #e0e0e0; column-rule: 1px dotted #e0e0e0;">
    <div style="display: inline-block;">
        <!-- first column's content -->
    </div>
    <div style="display: inline-block;">
        <!-- second column's content -->
    </div>
    <div style="display: inline-block;">
        <!-- third column's content -->
    </div>
</div>

此样式在 GitHub 的 Markdown 处理之外可以正常工作。如何将数据放入 Markdown 文档的多列中?请注意,我不关心对 IE 浏览器的支持,也不关心 IE 是否呈现单个列(无论如何,我的软件项目不能在 Windows 客户端上运行)。


GitHub 风格的 Markdown只允许内联 HTML 中某些允许列出的标签和属性 https://help.github.com/articles/github-flavored-markdown/#html:

HTML

您可以在自述文件、问题和拉取请求中使用 HTML 子集。

我们支持的标签和属性的完整列表可以在github/markup 的自述文件 https://github.com/github/markup/tree/master#html-sanitization.

关于<div>标签,自述文件说只有itemscope and itemtype除了一般属性白名单之外,属性还被列入白名单:

abbr, accept, accept-charset, accesskey, action, align, alt, axis, border, cellpadding, cellspacing, char, charoff, charset, checked, cite, clear, cols, colspan, color, compact, coords, datetime, dir, disabled, enctype, for, frame, headers, height, hreflang, hspace, ismap, label, lang, longdesc, maxlength, media, method, multiple, name, nohref, noshade, nowrap, prompt, readonly, rel, rev, rows, rowspan, rules, scope, selected, shape, size, span, start, summary, tabindex, target, title, type, usemap, valign, value, vspace, width, itemprop

没有标签支持style属性。

除非您可以使用自述文件中列出的标签和属性来破解某些内容,否则我认为您会发现自己运气不好。

另一种选择是将GitHub 页面 https://pages.github.com/网站,这似乎更加灵活。

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

如何使用 GitHub README 中的 Markdown 渲染多列? 的相关文章

  • 使 css nth-child() 只影响可见

    有没有办法用这个CSS只影响可见元素 table grid tr alt nth child odd background ebeff4 table grid tr alt nth child even background ffffff
  • 垂直对齐两个弹性项目[重复]

    这个问题在这里已经有答案了 我有一个弹性容器 container和两个弹性项目 item one and item two 我想将第一个项目垂直居中并将第二个项目粘在底部 我不知道如何在这种情况下垂直对齐第一项 HTML div class
  • IE10中的图像插值

    这是我的用例 我有一个采用响应式设计的网页 该页面垂直分成两半 我想在右侧显示图像 呈现为 PNG 或 JPG 的 PDF 页面 调整窗口大小后 图像的大小应立即更改 我以为我已经解决了这个问题 我将服务器上的图像渲染得足够大 以适应最大可
  • 如何在 HTML 表格上使用分页?

    我正在尝试使用这个分页library http flaviusmatis github io simplePagination js 在我的 HTML 表格页面 特别是浅色主题 中 但不知何故 我无法理解如何在我的 HTML 页面中以这种方
  • @font-face 字体在 Mac 的 Safari 和 Chrome 中显示模糊

    I m using two special fonts on my website for headings and subtitles They are working fine on a PC in IE Firefox and Chr
  • CSS 动画自定义属性/变量

    一段时间以来我一直在努力让它发挥作用 关键是内部 div 将具有某种形状 并且可能会不止一个 这就是为什么我使用nth child选择器 这个内部 div 应该显示然后再次隐藏一段时间 问题是 我想在一个动画中为所有 后来的 多个内部 di
  • 将下拉按钮和下拉菜单放在中心?

    div class dropup center block div
  • SaSS 循环使用

    我想创建类 将特定边距应用于我的块 例如 standard margin top margin top 10px standard margin bottom margin bottom 10px small margin top larg
  • 手机上猫头鹰轮播的高度

    我有一个使用 Owl Carousel 覆盖桌面上整个屏幕的图像 当我在手机设备上查看相同的图像时 它仅占用屏幕尺寸的三分之一 我如何调整高度 使其比手机上当前的高度更高 我读过一些帖子 但作为猫头鹰旋转木马的新手 我不确定我是否做错了什么
  • JavaFX 中的 -fx-background-radius 和 -fx-background-insets

    我正在使用 JavaFX 我想自定义一个按钮 我看到了几个可以设计的特征 其中我发现了两个我不认识的人 button fx padding 5 22 5 22 fx border color 121212 fx border width 2
  • 使用过渡+不透明度更改+溢出隐藏时出现问题

    如果您看到我共享的代码示例 您可以看到覆盖层超出了框的范围 我将问题追溯到transition属性 我想删除div之外的内容 溢出没有按预期工作 删除transition有效 但如果可能的话我想保留它 任何帮助表示赞赏 代码笔链接 http
  • 如何从 android.googlesource.com 或 github.com 下载单个目录?

    我想下载 https android googlesource com platform frameworks base git master tools aapt https android googlesource com platfo
  • onclick 函数上的 CSS 选择器

    有没有办法让CSS选择器onclick function 您可以在onclick https stackoverflow com questions 24365416 select element which have specific a
  • 从 PHP 生成渐变颜色

    我想知道如何构建一个给出颜色代码和 显示该颜色的渐变 例如 function generate color int colorindex Generate 10 pale colors of this color 请帮我 迈克尔引用的代码相
  • 带有 `:hover` 和多个相邻兄弟选择器的 Webkit 错误

    Safari 和 Chrome 以及 Opera 和 Firefox 都可以处理 hover伪类和相邻兄弟选择器 a hover div 这有效 但是 当添加另一个相邻兄弟时 div hover a div Webkit 崩溃了 但是 如果

  • 有多少像素? [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 一个有多少像素 br 标签添加 我知道 br 高度可以通过CSS控制line height财产 不同浏览器的值是否相同 它会添加与浏览
  • CSS calc() 是否可以得到负值?

    假设我们有一个位于视口中心的容器 centered margin 0 auto width 960px 在该容器内 我有另一个容器 其宽度需要为视口宽度的 100 我可以将边距设置为 widest margin 0 480px 例如 问题是
  • 角度 ng-repeat 根据条件添加样式

    我在 div 列表上使用 ng repeat 并且在渲染此 div 的 json 中手动添加项目 我需要定位我在 json 中添加的最后一个 div 它会自动在屏幕上渲染 即 couse 光标所在的位置 其余部分保持在相同位置 但没有给出渲
  • IE9-11 检测变换样式:preserve-3d

    我为一个项目制作了一个 3d 类型的菜单 自然 IE 会引起问题 因为 IE10 即使 3d 变换工作 也不支持变换样式 preserve 3d 我尝试了解决方法 通过对 3d 菜单容器的每个子元素应用变换 但至少可以说 动画看起来很糟糕
  • 文本溢出:省略号显示不同的字符

    我这里遇到了一些 CSS 问题 看这张图片 https www flickr com photos 125543025 N07 saved 1 在此图像中 我为文本 INTENSE TRAINING 添加了 CSS 样式 sample st

随机推荐

  • 从 Android 通知中的 URL 加载图像

    在我的 Android 应用程序中 我想动态设置将从 URL 加载的通知图标 为此 我使用了setLargeIcon中的NotificationBuilder的属性receiver 我参考了很多链接并尝试了各种解决方案 但无法获得所需的输出
  • Android 应用程序还需要包含扩展文件下载器吗?

    我的问题是当应用程序大于 50MB 并且必须使用它们时 应用程序是否需要能够下载扩展文件 根据 Android 开发人员帮助 应用程序可以依赖扩展文件 在较新的设备上 扩展文件会在 APK 之前 之后自动下载 而在 较旧的设备 上 开发人员
  • PHP客户端验证https证书

    我需要创建一个 php 来充当客户端并使用 https 下的一些 Web 服务 我的问题是我还想验证服务器证书 我需要知道我有正确的服务器并且中间没有人充当服务器 有人能帮助我吗 Thanks 如果您有curl 扩展 则可以将其配置为验证连
  • 如何防止IntelliJ IDEA删除未使用的包?

    我正在使用 intellij 我的问题是当我开始将一些临时未使用的包导入到我的类文件中时 intellij 会在一秒钟内删除这些行 我怎样才能关闭这个不太好的功能 Disable File Settings Editor General A
  • Xcode:如何创建出现在另一个视图控制器中的弹出视图控制器

    基本上我想做的是 假设我有一个名为 V1 的视图控制器 它内部有一个常规视图和一个按钮 现在 当您点击该按钮时 我希望该按钮创建一个操作 在同一视图控制器 V1 中弹出另一个名为 V2 的视图控制器 V2 的尺寸会缩小一些 使其不会填满整个
  • WPF 中的 InvokeRequired [重复]

    这个问题在这里已经有答案了 我在一个中使用了这个函数Windows forms应用 delegate void ParametrizedMethodInvoker5 int arg private void log left accs in
  • 在 Pandas DataFrame 中拆分列表

    我有一个包含多列的 csv 文件 使用 pandas 我将此 csv 文件读入数据帧 并有一个日期时间索引和五六个其他列 其中一列是时间戳列表 下面带有索引的示例 CreateDate TimeStamps 4 1 11 Timestamp
  • 我想隐藏工具提示中的标签,因为它显示未定义

    我正在使用 Chart js 来显示折线图 如何隐藏 Chart js 折线图的工具提示标签 工具提示中的标签显示undefined所以我想隐藏标签 请参见屏幕截图 也许有一种方法可以修改工具提示 让我只能在工具提示中显示图例值 我的代码如
  • 如何在 Intellij IDEA 实时模板 groovy 脚本中将变量传递给 groovy 代码?

    我有一个groovyScript in my IntellijIDEA 实时模板 如下所示 groovyScript D test groovy v1 on my D test groovy我有这样的代码 if v1 abc abc 现在我
  • 与云无关的架构? [关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 我正在对一个新解决方案进行一些架构工作 该解决方案最初将在 Windows Azure 中运行 不过 我希望解决方案 或至少是架构 设计 与云无
  • Firebase 事件未从 Android 服务记录

    我的 Android 应用程序中有一个音乐流媒体服务 我试图使用 Fire base 事件日志记录流媒体音乐 我相应地实现了所有内容 我可以从我的活动中看到事件 但不能从我的服务中看到事件 我是否遗漏了某些内容 或者 firebase 不支
  • 如何捕获 PHP 中的 cURL 错误

    我在用PHP curl功能 https php net manual en ref curl php将数据从我的本地计算机发布到网络服务器 我的代码如下 c curl init curl setopt c CURLOPT URL url c
  • 动态创建消费者spring kafka

    我正在创建一个与另一个服务通信的服务 以便识别要收听的 kafka 主题 kafka主题可能有不同的键和值类型 因此 我想为每个配置 主题 键类型 值类型 动态创建不同的 kafka 消费者 其中配置仅在运行时已知 然而在 spring k
  • ASP.net kerberos 偶尔下降到 NTLM

    背景 仅相关部分 我们有一个大型 Intranet asp net 2 0 3 5 应用程序 Web服务器是AD域上的Windows Server 2003 客户端使用 Windows IE 6 8 Windows 身份验证 具有从 Win
  • PHP内部hashCode函数

    我正在寻找与 JAVA 等效的 PHP SomeString hashCode 功能 我正在寻找的 hashCode 应该与 PHP 中用于索引 Hashmap 的 hashCode 相同 我希望你可以帮助我 EDIT 好的 找到了我正在搜
  • WPF 重复按钮 MouseUp

    有没有办法让重复按钮上的 MouseUpevent 在不再按下按钮时触发 我试图使用 MouseMove 事件来跟踪按下按钮时鼠标的位置 但 MouseDown 和 MouseUp 都不会触发鼠标左键的事件 关于可以做什么的任何想法或建议
  • 如何将图像(位图)调整为给定尺寸? [复制]

    这个问题在这里已经有答案了 如何以编程方式将图像 位图 大小调整为例如 800 480 我在我的应用程序中检索了一张约 1MB 的图片 我需要将其缩小到 800 480 我已经加载了该图片并对其进行了压缩 但是如何使其变小 ByteArra
  • 选择组合框文本

    我有一个组合框声明如下
  • 将Pycharm项目移动到另一个目录

    我的主目录空间不足 我想将 PyCharm 项目移动到另一个目录 我最终复制了它 因为重构不起作用 我删除了 pycache 和 zip 异常 出现的异常消失了 现在一切都按预期工作 不过 从 settings python interpr
  • 如何使用 GitHub README 中的 Markdown 渲染多列?

    为了呈现三列中的项目 我尝试将以下 CSS3 指令添加到我的项目中README md文件 但样式被删除 div div style display inline block div div div div