From 0520724f6e492a22c46331ac03a0978882dabe8c Mon Sep 17 00:00:00 2001 From: Yuki Mihashi <31533303+yuki384@users.noreply.github.com> Date: Thu, 11 Jun 2020 16:34:05 +0900 Subject: [PATCH] =?UTF-8?q?=E3=82=B7=E3=83=B3=E3=82=BF=E3=83=83=E3=82=AF?= =?UTF-8?q?=E3=82=B9=E3=83=8F=E3=82=A4=E3=83=A9=E3=82=A4=E3=83=88=E3=81=AB?= =?UTF-8?q?rouge=E3=82=92=E4=BD=BF=E7=94=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Gemfile | 3 + .../stylesheets/rouge_highlight_github.css | 210 ++++++++++++++++++ guides/rails_guides/markdown/renderer.rb | 19 +- guides/source/ja/layout.html.erb | 2 + 4 files changed, 227 insertions(+), 7 deletions(-) create mode 100644 guides/assets/stylesheets/rouge_highlight_github.css diff --git a/Gemfile b/Gemfile index 9bb72cd750c..febd4e9ff50 100644 --- a/Gemfile +++ b/Gemfile @@ -177,3 +177,6 @@ end gem "ibm_db" if ENV["IBM_DB"] gem "tzinfo-data", platforms: [:mingw, :mswin, :x64_mingw, :jruby] gem "wdm", ">= 0.1.0", platforms: [:mingw, :mswin, :x64_mingw, :mswin64] + +# SyntaxHighlight +gem "rouge" diff --git a/guides/assets/stylesheets/rouge_highlight_github.css b/guides/assets/stylesheets/rouge_highlight_github.css new file mode 100644 index 00000000000..f321c122f00 --- /dev/null +++ b/guides/assets/stylesheets/rouge_highlight_github.css @@ -0,0 +1,210 @@ +/* https://github.com/rouge-ruby/rouge/blob/master/lib/rouge/themes/github.rb */ +.highlight table td { padding: 5px; } +.highlight table pre { margin: 0; } +.highlight .cm { + color: #999988; + font-style: italic; +} +.highlight .cp { + color: #999999; + font-weight: bold; +} +.highlight .c1 { + color: #999988; + font-style: italic; +} +.highlight .cs { + color: #999999; + font-weight: bold; + font-style: italic; +} +.highlight .c, .highlight .cd { + color: #999988; + font-style: italic; +} +.highlight .err { + color: #a61717; + background-color: #e3d2d2; +} +.highlight .gd { + color: #000000; + background-color: #ffdddd; +} +.highlight .ge { + color: #000000; + font-style: italic; +} +.highlight .gr { + color: #aa0000; +} +.highlight .gh { + color: #999999; +} +.highlight .gi { + color: #000000; + background-color: #ddffdd; +} +.highlight .go { + color: #888888; +} +.highlight .gp { + color: #555555; +} +.highlight .gs { + font-weight: bold; +} +.highlight .gu { + color: #aaaaaa; +} +.highlight .gt { + color: #aa0000; +} +.highlight .kc { + color: #000000; + font-weight: bold; +} +.highlight .kd { + color: #000000; + font-weight: bold; +} +.highlight .kn { + color: #000000; + font-weight: bold; +} +.highlight .kp { + color: #000000; + font-weight: bold; +} +.highlight .kr { + color: #000000; + font-weight: bold; +} +.highlight .kt { + color: #445588; + font-weight: bold; +} +.highlight .k, .highlight .kv { + color: #000000; + font-weight: bold; +} +.highlight .mf { + color: #009999; +} +.highlight .mh { + color: #009999; +} +.highlight .il { + color: #009999; +} +.highlight .mi { + color: #009999; +} +.highlight .mo { + color: #009999; +} +.highlight .m, .highlight .mb, .highlight .mx { + color: #009999; +} +.highlight .sb { + color: #d14; +} +.highlight .sc { + color: #d14; +} +.highlight .sd { + color: #d14; +} +.highlight .s2 { + color: #d14; +} +.highlight .se { + color: #d14; +} +.highlight .sh { + color: #d14; +} +.highlight .si { + color: #d14; +} +.highlight .sx { + color: #d14; +} +.highlight .sr { + color: #009926; +} +.highlight .s1 { + color: #d14; +} +.highlight .ss { + color: #990073; +} +.highlight .s { + color: #d14; +} +.highlight .na { + color: #008080; +} +.highlight .bp { + color: #999999; +} +.highlight .nb { + color: #0086B3; +} +.highlight .nc { + color: #445588; + font-weight: bold; +} +.highlight .no { + color: #008080; +} +.highlight .nd { + color: #3c5d5d; + font-weight: bold; +} +.highlight .ni { + color: #800080; +} +.highlight .ne { + color: #990000; + font-weight: bold; +} +.highlight .nf { + color: #990000; + font-weight: bold; +} +.highlight .nl { + color: #990000; + font-weight: bold; +} +.highlight .nn { + color: #555555; +} +.highlight .nt { + color: #000080; +} +.highlight .vc { + color: #008080; +} +.highlight .vg { + color: #008080; +} +.highlight .vi { + color: #008080; +} +.highlight .nv { + color: #008080; +} +.highlight .ow { + color: #000000; + font-weight: bold; +} +.highlight .o { + color: #000000; + font-weight: bold; +} +.highlight .w { + color: #bbbbbb; +} +.highlight { + font-family: "Anonymous Pro", "Inconsolata", "Menlo", "Consolas", "Bitstream Vera Sans Mono", "Courier New", monospace; +} diff --git a/guides/rails_guides/markdown/renderer.rb b/guides/rails_guides/markdown/renderer.rb index 78820a78562..4013a2051b4 100644 --- a/guides/rails_guides/markdown/renderer.rb +++ b/guides/rails_guides/markdown/renderer.rb @@ -1,4 +1,5 @@ # frozen_string_literal: true +require 'rouge' module RailsGuides class Markdown @@ -8,8 +9,8 @@ class Renderer < Redcarpet::Render::HTML def block_code(code, language) <<-HTML
-
-#{ERB::Util.h(code)}
+
+#{Rouge::Formatters::HTML.new.format(Rouge::Lexers.const_get(brush_for(language)).new.lex(code)).chop}
HTML @@ -58,14 +59,18 @@ def convert_footnotes(text) def brush_for(code_type) case code_type - when "ruby", "sql", "plain" - code_type + when "ruby" + "Ruby" + when "sql" + "SQL" when "erb", "html+erb" - "ruby; html-script: true" + "ERB" when "html" - "xml" # HTML is understood, but there are .xml rules in the CSS + "XML" # HTML is understood, but there are .xml rules in the CSS + when "bash" + "ConsoleLexer" else - "plain" + "PlainText" end end diff --git a/guides/source/ja/layout.html.erb b/guides/source/ja/layout.html.erb index 4f38c805a52..5477f6fec6f 100644 --- a/guides/source/ja/layout.html.erb +++ b/guides/source/ja/layout.html.erb @@ -33,6 +33,8 @@ + +