Rails 4.2：不使用Pygments gem突出顯示語法

Question

想要在Wiki博客上創建代碼段和減價。 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";

嘗試添加新代碼，它不會給我任何代碼塊或語法高亮顯示。

寶石文件

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

Answer 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)

[編輯]

另外，請注意，您需要以以下格式編寫代碼

```ruby

your code lines

```

希望對您有所幫助！