css - 如何在语法突出显示的 Markdown 代码中标记搜索短语？

Question

在我的 Rails 博客应用程序中，我可以编写帖子正文 Markdown (我使用 redcarpet 进行 Markdown 解析，使用 CodeRay 进行语法高亮显示)。

我有一个搜索页面，它返回包含搜索查询字符串的帖子。

我使用 rails helper突出查询:

@post.body = highlight(@post.body, @query_phrase, highlighter: '<span class=\'highlighted\'>\1</span>'))

我使用 css 将高亮类的背景设置为黄色。

帖子正文按照在文本区域中输入的方式存储(作为 markdown，未转换)，并且在呈现只读 View (如 posts#show 和搜索结果)时处理 markdown。

问题是当我搜索“ruby”这个词时，输入的 markdown 使用带语言名称的围栏代码块进行语法高亮显示，搜索结果变得一团糟。

这是正文 Markdown :

ruby

```ruby
puts "Hello, world"
```

这是搜索结果截图:

这是可以理解的，因为围栏代码块之后的匹配“ruby”被 span 和 class 包裹起来以突出显示，但 Markdown 现在看到了

```<span class='highlighted'>ruby</span> 

并按原样输出跨度。

类似的问题也发生在代码中，代码中的匹配项也被包装并与搜索结果中的跨度一起输出。

如何避免这种情况，并让搜索突出显示输出 Markdown 中的实际短语，最好不必保留 Markdown 的 html 输出？

Answer 1

你应该先把它变成HTML，然后通过highlight传递。