除了React之外,我还使用了一个名为Prism.js的外部库来突出显示语法。我有一个React组件,可以生成一些示例代码。First render很好。该组件使用其初始属性进行呈现,然后我在componentDidUpdate()中调用Prism.highlightElement();,它也可以很好地突出显示语法。但是,我们已经在React父组件中输入了更改需要生成的代码的内容。当进行更改时,生成的突出显示的代码保持不变。子组件的其他部分没有被语法高亮显示,尽管Prism.js可以很好地更新。因此,React没有重新呈现修改过的DOM似乎是一个问题。
下面是该子组件的简化版本:
class
我在我们的项目中使用PageDpwn标记来简化内容输入和代码片段。我已经可以打印出markdown并将其转换为HTML语言。我使用jQuery $.ajax从数据库中检索标记并动态转换它。当然,这并不理想。我想从数据库中打印出直接的超文本标记语言,但当我这样做时,我不得不使用PHP打印函数,它输出的代码片段如下:
<--?php # Code ?-->
这是非常不幸的。因此,我在页面视图中将markdown转换为HTML。
<script>
var id = $('input[name=id]').val();
var html = ''
我正在为Prism.js编写一个自定义语言扩展,但在突出显示注释时遇到问题。我想突出显示以#或//开头并从行首开始的注释:
# Example comment
// Example comment
1*2//comment <-- this should not be highlighted
下面是我用来检测注释的模式:/(^|[^\\])[#\/\/].*/。
不幸的是,它并没有像预期的那样工作:
我尝试使用lookbehind和greedy选项(),但没有帮助。
我正在使用Pandoc输入标记数据和输出HTML文件。使用--no-highlight标志,我可以在没有内置基本语法突出显示的情况下获得输出语法,并使用Prism.js突出显示代码,这要健壮得多。
但是,Prism要求code或pre的类名中有language-*。以php为例,Pandoc输出<pre class="php">。我通过以下方法成功地破解了它的工作:
```language-php
As the start of each code block. However, when I want to export the same code as an E
所以我开始更新Stackedit项目。我升级了所有依赖项并更新为ES6。应用程序已经启动,但是一旦我到达应用程序localhost的Vue部分:8080/ app,我就会得到以下错误
Uncaught TypeError: Cannot read properties of undefined (reading 'addSupport')
at prism.js:9669:1
at ./node_modules/prismjs/prism.js (prism.js:9670:2)
at __webpack_require__ (bootstrap:24:
怎么才能让<code>标记在前后没有新行呢?我试过<span>没有成功。我还在li中尝试了一个嵌套的li,但没有成功。
我不认为这很重要,但为了记录起见,我也在使用prism.js进行代码样式设计。
例如,我希望这一切都在网上:
<ul>
<li>great way to replace a infinite loop such as <code id = "loopSnippet" class="language-javascript">while (true) {