将jquery选项卡应用于markdown

时间:2016-03-17 04:36:22

标签: jquery jquery-ui markdown github-flavored-markdown

我正在尝试创建一个开发人员文档页面,并希望使用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>

任何帮助将不胜感激! :)

0 个答案:

没有答案