我正在尝试创建一个开发人员文档页面,并希望使用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>
任何帮助将不胜感激! :)