Стиль CodeRay испортил - как исправить

Question

Я пытаюсь использовать CodeRay в своем проекте, и он, кажется, работает, однако стиль и форматирование, кажется, перепутаны:

Обратите внимание, что я использую CodeRay в сочетании с Markdown (Redcarpet). Я добавил оба драгоценных камня в свой гемфайл и в app/helpers/application_helper.rb Я добавил следующее:

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

def markdown(text)
    coderayified = CodeRayify.new(:filter_html => true, :hard_wrap => true)

    language ||= :plaintext

    options = {
        :fenced_code_blocks => true,
        :no_intra_emphasis => false,
        :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

Который работает, как вы можете видеть на прикрепленном скриншоте. Проблема заключается в форматировании. Есть идеи?

Answer 1

Я также заметил, что текущий CSS, поставляемый с репозиторием CodeRay, не очень хорошо реагирует на разработку для мобильных устройств / планшетов.

Чтобы исправить, выполните следующие действия:

1. Добавьте это в свой CSS:

/ * Отображение полосы прокрутки * /

::-webkit-scrollbar {
    -webkit-appearance: none;
    margin-top: 10px;
    width: 7px;
    height: 8px;
    background-color: #eee;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    border-radius: 4px;
    height: 10px;
    background-color: rgba(0,0,0,.5);
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}

2. В файле помощника приложения для параметров CodeRay убедитесь, что для параметров block_code:line_numbers установлено значение:inline, как показано ниже:

Класс CodeRayify

    def block_code(code, language)
        CodeRay.scan(code, language).div(:line_numbers => :inline)
    end
end

Answer 2

Вы пытались использовать таблицу для line_numbers вместо inline?

module ApplicationHelper
 class CodeRayify < Redcarpet::Render::HTML
  def block_code(code, language)
    CodeRay.scan(code, language).div(:line_numbers => :table)
  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