Rails 4.2：没有使用Pygments gem突出语法

时间：2015-11-18 15:14:15

标签： ruby-on-rails ruby

想要创建代码段＆amp;维基博客上的降价促销。 Markdown可以正常使用redcarpet，但不能获得代码片段。已安装的Pygments gem创建了一个pygments.scss文件并复制了以下文本。

/ *    一些简单的Github样式，语法通过Pygments突出显示CSS。 * / 

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 */

将文件导入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";

尝试添加新代码，它不会给我任何代码块或语法高亮。

的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

更新了应用程序帮助文件

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

删除了pygments文件

并更新了展会页面

<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 %>

1 个答案:

答案 0 :(得分：1)

使用coderay代替语法高亮显示（并且可以删除您为突出显示而定义的所有css类）。它没有外部依赖性并且给出了惊人的结果。

将以下gem添加到您的gemfile中：

gem 'coderay'

然后，bundle install

现在在您的application_helper.rb中，定义一个帮助方法（就像您对Pygments所做的那样）将文本转换为HTML并同时集成语法高亮。

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

现在，无论您需要将文本转换为HTML，只需将该文本传递给名为“markdown”的方法，如下所示

markdown(your_content_text)

[编辑]

此外，请注意，您需要在以下format

中编写代码 
```ruby

your code lines

```

我希望它有所帮助！

相关问题
最新问题