它们是否有语法高亮插件,可以让您将可忽略的 html 元素嵌入到代码片段中?

Are they any syntax highlighting plugins that will allow you to embed an ignorable html element into a snippet?

我正在尝试为我们的 api 制作动态代码示例,可以从输入 html 元素构建。

一个配对的例子如下所示,我给用户一个输入来命名他们想要创建的设备。

<input class="observable-input" data-key="deviceName" type="text" value="deviceKey" />

然后我希望该输入更新代码示例(将示例中的设备名称替换为用户输入的设备名称)。

<code lang="python"> device = { "name": "<span data-observeKey="deviceName">Name</span>" } client.createDevicewrite(device) </code>

我有所有的代码设置来观察输入的变化和更新代码示例,这很有效。我看过的所有语法突出显示,通常都会将代码片段切碎并重新呈现用自己的 html 包裹的示例(用于样式)。有没有一种 option/configurable 方法可以让语法高亮显示不去除这些标签,或者我应该寻找一种不同的方法来保留语法高亮显示并仍然支持动态更新而无需进行全文搜索每个片段的渲染标签。

pygment 的示例输出(我正在使用的当前语法荧光笔)。

<li> <div class="line"> <span class="n">device</span> <span class="o">=</span> <span class="n">{</span> <span class="s">"name"</span> <span class="p">:</span> <span class="s">"Name"</span> <span class="n">}</span> </div> </li>

我决定只采用蛮力方法,结果表现不错,如果有人对我所做的感兴趣,我会把我的代码留在这里

https://gist.github.com/selecsosi/5d41dae843b9dea4888f

因为我使用 backbone、lodash 和 jquery 作为我的基本应用程序框架,所以要点使用它们。我有一个管理器,它将更新从输入推送到我用来动态更新代码示例的页面上的跨度