CODEWITHSUNDEEP
ruby-on-railsruby
Neil
Neil

Reputation: 569

Rails 4.2: No syntax highlighting using Pygments gem

Want to create code snippets & markdown on a wiki blog. Markdown works fine with redcarpet but not getting code snippets. Installed Pygments gem created a pygments.scss file and copied the following text.

/* Some simple Github-like styles, with syntax highlighting CSS via Pygments. */

pre{
  background-color: #eee;
  padding: 1.5rem 3.5%;
  margin: 2rem 0;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  overflow: auto;
}
code{
  background-color: #eee;
  padding: 1px 3px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
}

.hll { background-color: #ffffcc }
.c { color: #999988; font-style: italic } /* Comment */
.err { color: #a61717; background-color: #e3d2d2 } /* Error */
.k { color: #000000; font-weight: bold } /* Keyword */
.o { color: #000000; font-weight: bold } /* Operator */
.cm { color: #999988; font-style: italic } /* Comment.Multiline */
.cp { color: #999999; font-weight: bold; font-style: italic } /* Comment.Preproc */
.c1 { color: #999988; font-style: italic } /* Comment.Single */
.cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */
.gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
.ge { color: #000000; font-style: italic } /* Generic.Emph */
.gr { color: #aa0000 } /* Generic.Error */
.gh { color: #999999 } /* Generic.Heading */
.gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
.go { color: #888888 } /* Generic.Output */
.gp { color: #555555 } /* Generic.Prompt */
.gs { font-weight: bold } /* Generic.Strong */
.gu { color: #aaaaaa } /* Generic.Subheading */
.gt { color: #aa0000 } /* Generic.Traceback */
.kc { color: #000000; font-weight: bold } /* Keyword.Constant */
.kd { color: #000000; font-weight: bold } /* Keyword.Declaration */
.kn { color: #000000; font-weight: bold } /* Keyword.Namespace */
.kp { color: #000000; font-weight: bold } /* Keyword.Pseudo */
.kr { color: #000000; font-weight: bold } /* Keyword.Reserved */
.kt { color: #445588; font-weight: bold } /* Keyword.Type */
.m { color: #009999 } /* Literal.Number */
.s { color: #d01040 } /* Literal.String */
.na { color: #008080 } /* Name.Attribute */
.nb { color: #0086B3 } /* Name.Builtin */
.nc { color: #445588; font-weight: bold } /* Name.Class */
.no { color: #008080 } /* Name.Constant */
.nd { color: #3c5d5d; font-weight: bold } /* Name.Decorator */
.ni { color: #800080 } /* Name.Entity */
.ne { color: #990000; font-weight: bold } /* Name.Exception */
.nf { color: #990000; font-weight: bold } /* Name.Function */
.nl { color: #990000; font-weight: bold } /* Name.Label */
.nn { color: #555555 } /* Name.Namespace */
.nt { color: #000080 } /* Name.Tag */
.nv { color: #008080 } /* Name.Variable */
.ow { color: #000000; font-weight: bold } /* Operator.Word */
.w { color: #bbbbbb } /* Text.Whitespace */
.mf { color: #009999 } /* Literal.Number.Float */
.mh { color: #009999 } /* Literal.Number.Hex */
.mi { color: #009999 } /* Literal.Number.Integer */
.mo { color: #009999 } /* Literal.Number.Oct */
.sb { color: #d01040 } /* Literal.String.Backtick */
.sc { color: #d01040 } /* Literal.String.Char */
.sd { color: #d01040 } /* Literal.String.Doc */
.s2 { color: #d01040 } /* Literal.String.Double */
.se { color: #d01040 } /* Literal.String.Escape */
.sh { color: #d01040 } /* Literal.String.Heredoc */
.si { color: #d01040 } /* Literal.String.Interpol */
.sx { color: #d01040 } /* Literal.String.Other */
.sr { color: #009926 } /* Literal.String.Regex */
.s1 { color: #d01040 } /* Literal.String.Single */
.ss { color: #990073 } /* Literal.String.Symbol */
.bp { color: #999999 } /* Name.Builtin.Pseudo */
.vc { color: #008080 } /* Name.Variable.Class */
.vg { color: #008080 } /* Name.Variable.Global */
.vi { color: #008080 } /* Name.Variable.Instance */
.il { color: #009999 } /* Literal.Number.Integer.Long */

imported the file into application.scss

$dark: #424652;
  $light: #9a9da4;
  $highlight: #8bc6db;
  $border: #E9E9E9;
  $white: #FFFFFF;
  @import url(http://fonts.googleapis.com/css?family=Raleway:400,700);
  @import "normalize";
  @import "welcome";
  @import "bootstrap-sprockets";
  @import "bootstrap";
  @import "articles";
  @import "pygments";
  @import "bootstrap-wysihtml5/bootstrap3-wysihtml5";

try to add new code it does not give me any code block or syntax highlighting.

gemfile

ruby '2.2.3'
gem 'rails', '4.2.4'
gem 'sqlite3', group: :development
gem 'sass-rails', '~> 5.0'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.1.0'
gem 'jquery-rails'
gem 'turbolinks'
gem 'jbuilder', '~> 2.0'
gem 'sdoc', '~> 0.4.0', group: :doc
gem 'bootstrap-sass', '~> 3.3.5'
gem 'pygments.rb', '~> 0.6.0'
gem 'redcarpet', '~> 3.2.2'
gem 'devise'
gem 'bootstrap-wysihtml5-rails', github: 'nerian/bootstrap-wysihtml5-rails'
gem 'will_paginate', '~> 3.0.7'

application.helper.rb

module ApplicationHelper
  class HTMLwithPygments < Redcarpet::Render::HTML
    def block_code(code, language)
      Pygments.highlight(code, lexer: language)
    end
  end
  def markdown(content)
    renderer = HTMLwithPygments.new(hard_wrap: true, filter_html: true)
    options = {
      autolink: true,
      no_intra_emphasis: true,
      disable_indented_code_blocks: true,
      fenced_code_blocks: true,
      lax_html_blocks: true,
      strikethrough: true,
      superscript: true
    }
    Redcarpet::Markdown.new(renderer, options).render(content).html_safe
  end

updated application helper file

module ApplicationHelper
 class CodeRayify < Redcarpet::Render::HTML
    def block_code(code, language)
        CodeRay.scan(code, language).div
    end
end

def markdown(text)
    coderayified = CodeRayify.new(filter_html: true,  hard_wrap: true)
    options = {
        :fenced_code_blocks => true,
        :no_intra_emphasis => true,
        :autolink => true,
        :strikethrough => true,
        :lax_html_blocks => true,
        :superscript => true
    }
    markdown_to_html = Redcarpet::Markdown.new(coderayified, options)
    markdown_to_html.render(text).html_safe
 end
end

removed the pygments file

and updated the show page

<div id="post_show_content" class="skinny_wrapper
wrapper_padding">
  <header>
    <p class="date"><%= @post.created_at.strftime('%A, %B %d') %></p>
    <h1><b><%= @post.title %></b></h1>
    <hr>
  </header>

  <div id="content">
    **<%= markdown @post.content %>**
  </div>

   <hr>
     <%= link_to "<-Back", posts_path %>


  </div>

<% if user_signed_in? %>

    <% if @post.user_id == current_user.id %>

    <div id="admin_links">
      <%= link_to "Edit Article", edit_post_path(@post), class: "btn btn-default" %>
      <%= link_to "Delete Article", post_path(@post), method: :delete, data: { confirm: 'Are you sure you want to delete this post?' }, class: "btn btn-default" %>
    </div>

  <% end %>
<% end %>

Upvotes: 0

Views: 465

Answers (1)

Dushyant
Dushyant

Reputation: 4960

Use coderay instead for syntax highlighting (and can remove all css classes you have defined for highlighting). It doesn't have external dependencies and gives amazing results.

Add following gem to your gemfile:

gem 'coderay'

then, bundle install

Now in your application_helper.rb, define a helper method (as you did for Pygments) to covert text to HTML and simultaneously have syntax highlighting integrated.

class CodeRayify < Redcarpet::Render::HTML
    def block_code(code, language)
        CodeRay.scan(code, language).div
    end
end

def markdown(text)
    coderayified = CodeRayify.new(filter_html: true,  hard_wrap: true)
    options = {
        :fenced_code_blocks => true,
        :no_intra_emphasis => true,
        :autolink => true,
        :strikethrough => true,
        :lax_html_blocks => true,
        :superscript => true
    }
    markdown_to_html = Redcarpet::Markdown.new(coderayified, options)
    markdown_to_html.render(text).html_safe
end

Now wherever you need to convert text to HTML, you can simply pass that text into a method named 'markdown' as show below

markdown(your_content_text)

[Edit]

Also, please note that, you need to write your code in following format

```ruby

your code lines

```

I hope it helps!

Upvotes: 1

Related Questions