How to mark search phrase in syntax highlighted markdown code?

Tags: css,ruby-on-rails,markdown,redcarpet,coderay

Problem :

In my rails blog app, I may author the post body markdown (I am using redcarpet for markdown parsing with CodeRay for syntax highlighting).

I have a search page, which returns posts containing the search query string.

I use the rails helper to highlight queries:

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

And I use css to set the background to yellow on the highlighted class.

The post body is stored as entered in the textarea (as markdown, unconverted), and the markdown is processed while rendering readonly views like posts#show and search results.

The problem is when I search for the word 'ruby', where the entered markdown uses fenced code blocks with language name for syntax highlighting, the search result gets messed up.

Here is the body markdown:


puts "Hello, world"

And here is the search result screenshot:

Search result screenshot

This is understandable, since the match 'ruby' after the fenced code block gets wrapped with the span and class for highlighting, but the markdown now sees

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

and outputs the span as is.

And similar problems occur within code as well, where matches within the code also get wrapped and outputted with the span in the search result.

How do I avoid this, and have the search highlight the actual phrase in the outputted markdown, preferably without having to persist the markdown's html output?

Solution :

You should turn it into HTML first, and then pass it through highlight.

    CSS Howto..

    How to use two JavaScript (.js) files on one website?

    CSS: show triangles in a row

    How to style div's so that they don't stack right on top of each other?

    how to create a half bordered circle(only css, not js or even svg)?

    CSS how to make a fixed height?

    How can you separate the navigation bar list from the body list?

    jQuery glowing animations : how to improve?

    How to limit input text length using CSS3? [duplicate]

    How to set CSS width so that the element will have the exact window width?

    How to make LESS combine CSS rules with a comma

    How to get a zoomed out background image?

    How to make a HTML list appear without the bullets signs using CSS only?

    How do I set css using jQuery .css after a period of time?

    How can I use javascript, or css to make my text somewhat transparent?

    How to remove the blue halo glow from jQuery Mobile input elements that receive focus

    css how to remove the empty space at the left

    How can i expand the content through css?

    CSS Progress bar is out of place, how to keep it in place?

    How to do multiple class selectors in Stylus CSS pre-processor

    Foundation 6: how to handle images that has an vertical overflow within one row?

    How to Show Menu after full size window in responsive Design

    How to change a class CSS with a Greasemonkey script?

    How to make a horizontal list start in the center of the page?

    CSS how to push text away from border

    How to styles labels only within fieldsets using CSS?

    Only Javascript code to show a class without onclick

    How to get the css with in inline styles using jquery

    Jquery canvas cloud plugin - How to style canvas elements with CSS

    How to prevent javascript and css messing up?

    My pure CSS dropdown isn't working, anybody knows how to fix it? [duplicate]