Question

我正在尝试创建一个开发人员文档页面，并希望使用jQuery UI - Tabs将一些用GFM编写的代码块转换为选项卡式面板。该网站使用github markdown converter在wordpress上运行，以生成此页面的内容。

理想情况下针对像this

这样的选项卡/开关

第1期：如何围绕代码的每个部分包装div，并使用markdown为div添加一个类，以便我可以应用jquery选项卡？

第2期：当我进入此步骤时 - 制作标签，以便在一个标签上更改代码语言时，它会自动切换所有其他标签代码区域的更改？

目前的降价情况如下：

#### Heading of section
Some explanation text

```objc (Theres syntax highlighting so this assigns it a class of 'objc')
    xxxxxxxxxxxxxxxx
```
```java
    xxxxxxxxxxxxxx
```
```swift
    xxxx
```

当前输出

<h2>Heading of section</h2>
<p>Some explanation text</p>
<pre>
    <code class="objc">
    xxxxxxxxxxxxx
    </code>
</pre>
<pre>
    <code class="java">
    xxxxxxxxxxxxx
    </code>
</pre>
<pre>
    <code class="swift">
    xxxxxxxxxxxxx
    </code>
</pre>

期望的输出

<h2>Heading of section</h2>
<p>Some explanation text</p>
<div class="tabs">
    <ul>
        <li><a href=".objc">Objective C</a></li>
        <li><a href=".java">Java</a></li>
        <li><a href=".swift">Swift</a></li>   
    </ul>
    <pre>
        <code class="objc">
        xxxxxxxxxxxxx
        </code>
    </pre>
    <pre>
        <code class="java">
        xxxxxxxxxxxxx
        </code>
    </pre>
    <pre>
        <code class="swift">
        xxxxxxxxxxxxx
        </code>
    </pre>
</div>

任何帮助将不胜感激！：）

将jquery选项卡应用于markdown

0 个答案: