8mm电缆/未加围栏commonmark

维护者

详细信息

github.com/cable8mm/commonmark-unfenced

源代码

问题

安装: 76

依赖: 1

建议者: 1

安全: 0

星标: 0

关注者: 1

分支: 0

开放问题: 0

v1.0.0 2024-04-06 11:15 UTC

Requires

Requires (Dev)

MIT 6b810d706623fc84ac34aa0815c9cf903d088b1d

  • Jess Archer <jess.woop@jessarcher.com>

This package is auto-updated.

Last update: 2024-09-14 02:12:55 UTC

README

释放您的围栏代码。

league/commonmark库的扩展。

安装

安装包后，您需要注册扩展。

使用 graham-campbell/markdown

在您的 config/markdown.php 文件中，在 CommonMarkCoreExtension 之后添加该扩展

  return [
      // ...
      'extensions' => [
          League\CommonMark\Extension\CommonMark\CommonMarkCoreExtension::class,
          League\CommonMark\Extension\GithubFlavoredMarkdownExtension::class,
+         Laravel\Unfenced\UnfencedExtension::class,
      ],
  ];

手动

use Laravel\Unfenced\UnfencedExtension;
use League\CommonMark\Environment\Environment;
use League\CommonMark\Extension\CommonMark\CommonMarkCoreExtension;
use League\CommonMark\MarkdownConverter;

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

$converter = new MarkdownConverter($environment);
echo $converter->convert('...');

用法

功能通过代码围栏的“info”字符串启用。

注意

此扩展不包含任何CSS。

添加文件名

要在代码上方显示文件名，请添加 filename 属性

```php filename=src/Hello.php
// ...
```

image

添加选项卡

可以通过指定 tab 属性将相邻的代码围栏组合成选项卡视图

```vue tab=Vue
// ...
```

```javascript tab=React
// ...
```

image

您还可以包括 filename 属性，这在提供文件名根据语言不同而不同的代码示例时特别有帮助

```vue tab=Vue filename=Welcome.vue
// ...
```

```javascript tab=React filename=Welcome.jsx
// ...
```

image

当使用选项卡时，扩展将向您的页面注入JavaScript。JavaScript启用以下功能

  • 它将为活动的选项卡按钮和选项卡内容应用 active 类。您可以使用CSS突出显示活动的选项卡，并隐藏非活动的选项卡内容。
  • 如果在多个选项卡部分中发现相同的选项卡名称，它们将同步。即，在某个部分中点击“React”选项卡，将在所有部分中切换到该选项卡。
  • 活动的选项卡将保存到浏览器的本地存储中，以便在页面和访问之间持久。