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 center image using CSS without white border

    How to use imported css styles in GWT correctly

    How to effectively use the Frameless grid?

    How to set different body background color for different pages in one css files?

    How to add css 3dtransform property with jquery to a dom element?

    How to auto width a form element with CSS?

    How to horizontally center Twitter Bootstrap grid elements

    CSS: how to make children fit parent's width

    With HTML and CSS, how to have an image that is vertically aligned with a horizontal line?

    How to give style (image) for browse button in CSS?

    What is cufon and canvas and how to overwrite them

    Table cells without borders having white lines - how do I disable them?

    How to make read more option with html/CSS?

    How to override a property set in an id (CSS)

    how to overwrite RadWindow control CSS classes with mine?

    CKEditor — How can I add document-specific CSS styles

    How to put 3 of these tables into the correct spot with CSS

    How to use font-awesome from server

    div shown with jquery is cropped

    How to achieve a CSS footer “curtain” effect?

    How to add class based on which css class name is come in jquery

    How to achieve vertical alignmernt of text paragraphs between Bootstrap columns

    How would I name this HTML code so I could edit it with CSS? [closed]

    HTML - How to do a square plain button while using jQuery Mobile css [closed]

    Linked text a few lines below hamburger menu is not showing as linkified, but shows fine further down

    How can I simply add a css file to change the background color for my shiny app

    How to apply css for a class within h2?

    How can I setup Javascript dynamically to expand divs when clicking another div?

    css: how to get the browser's default font family

    How to set min-height using css [closed]