README

这个库是PHP League的CommonMark解析器的扩展，添加了受Amber Wilson启发的可访问标题永久链接。

🗒 注意：此页面上渲染的HTML可能没有使用此方法。

⚠️ 警告：不要与CommonMark提供的标题永久链接扩展一起使用。我不确定会发生什么；可能是没有什么，也可能是造成奇点事件，谁知道呢？

安装

composer require 8fold/commonmark-accessible-heading-permalinks

使用

use League\CommonMark\Environment\Environment;
use League\CommonMark\MarkdownConverter;

use League\CommonMark\Extension\CommonMark\CommonMarkCoreExtension;

use Eightfold\CommonMarkAccessibleHeadingPermalink\HeadingPermalinkExtension;

$environment = new Environment();
$environment->addExtension(new CommonMarkCoreExtension());
$environment->addExtension(new HeadingPermalinkExtension());

$converter = new MarkdownConverter($environment);

然后像平常一样编写markdown。

# Hello

This should be an improvement.

这将输出以下内容（增加空格以改善可读性）。

<div is="heading-wrapper">
  <h1 id="hello">Hello</h1>
  <a hreg="#hello">
    <span aria-hidden="true">¶</span>
    <span>Section titled Hello</span>
  </a>
</div>

详情

HTML被视为一个整体组件。通过引用包含元素和使用子选择器和兄弟选择器来对内部元素进行样式化。

例如，链接中的第二个span应主要保留供使用辅助技术的用户使用。因此，我希望它在屏幕外，并且当链接获得焦点时仍然会被朗读。

div[is='heading-wrapper'] > a > span:nth-of-type(2) {
  position: absolute;
  left: -999em;
  right: auto;
}

此示例使用美国网页设计系统提供的解决方案，并且不是实现类似结果的唯一方法。

8fold/ commonmark-accessible-heading-permalinks

维护者

详情

README

安装

使用

详情

其他