mirror of https://github.com/rails/rails
Use Rouge for guides code highlighting [ci skip]
Replace javascript highlighting using Prism with the Rouge markdown highlighter. Uses the github theme.
This commit is contained in:
Petrik
parent
86480e71fa
commit
f6bcd1496e
1
Gemfile
1
Gemfile
|
|
@ -39,6 +39,7 @@ group :doc do
|
|||
gem "redcarpet", "~> 3.2.3", platforms: :ruby
|
||||
gem "w3c_validators"
|
||||
gem "kindlerb", "~> 1.2.0"
|
||||
gem "rouge"
|
||||
end
|
||||
|
||||
# Active Support
|
||||
|
|
|
|||
|
|
@ -407,6 +407,7 @@ GEM
|
|||
rufus-scheduler (~> 3.2)
|
||||
retriable (3.1.2)
|
||||
rexml (3.2.4)
|
||||
rouge (3.20.0)
|
||||
rubocop (0.82.0)
|
||||
jaro_winkler (~> 1.5.1)
|
||||
parallel (~> 1.10)
|
||||
|
|
@ -585,6 +586,7 @@ DEPENDENCIES
|
|||
resque
|
||||
resque-scheduler
|
||||
rexml
|
||||
rouge
|
||||
rubocop (>= 0.47)
|
||||
rubocop-performance
|
||||
rubocop-rails
|
||||
|
|
|
|||
|
|
@ -27,8 +27,6 @@
|
|||
if (window.location.protocol === "file:") Turbolinks.supported = false;
|
||||
|
||||
document.addEventListener("turbolinks:load", function() {
|
||||
Prism.highlightAll();
|
||||
|
||||
var guidesMenu = document.getElementById("guidesMenu");
|
||||
var guides = document.getElementById("guides");
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,208 @@
|
|||
.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 .ch, .highlight .cd, .highlight .cpf {
|
||||
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: #07a;
|
||||
}
|
||||
.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, .highlight .sa, .highlight .dl {
|
||||
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, .highlight .fm {
|
||||
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: #005cc5;
|
||||
}
|
||||
.highlight .nv, .highlight .vm {
|
||||
color: #008080;
|
||||
}
|
||||
.highlight .ow {
|
||||
color: #000000;
|
||||
font-weight: bold;
|
||||
}
|
||||
.highlight .o {
|
||||
color: #000000;
|
||||
font-weight: bold;
|
||||
}
|
||||
.highlight .w {
|
||||
color: #bbbbbb;
|
||||
}
|
||||
.highlight {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
|
@ -29,7 +29,7 @@ pre, code {
|
|||
font-size: 1em;
|
||||
font-family: "Anonymous Pro", "Inconsolata", "Menlo", "Consolas", "Bitstream Vera Sans Mono", "Courier New", monospace;
|
||||
line-height: 1.5;
|
||||
margin: 1.5em 0;
|
||||
margin: 1em 0;
|
||||
overflow: auto;
|
||||
color: #222;
|
||||
}
|
||||
|
|
@ -729,11 +729,8 @@ div.important p, div.caution p, div.warning p, div.note p, div.info p {
|
|||
}
|
||||
|
||||
/* When triple-clicking shell code, select only the command, not the prompt */
|
||||
code.language-shell-session span.token.command {
|
||||
display: inline-flex;
|
||||
}
|
||||
span.token.sh.important {
|
||||
margin-right: 0.5em;
|
||||
code.highlight.console span.w {
|
||||
display: table-cell;
|
||||
}
|
||||
|
||||
/* Edge Badge
|
||||
|
|
|
|||
|
|
@ -1,141 +0,0 @@
|
|||
/* PrismJS 1.17.1
|
||||
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript+bash+erb+json+markup-templating+ruby+shell-session+sql+yaml */
|
||||
/**
|
||||
* prism.js default theme for JavaScript, CSS and HTML
|
||||
* Based on dabblet (http://dabblet.com)
|
||||
* @author Lea Verou
|
||||
*/
|
||||
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
color: black;
|
||||
background: none;
|
||||
text-shadow: 0 1px white;
|
||||
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
||||
font-size: 1em;
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
word-wrap: normal;
|
||||
line-height: 1.5;
|
||||
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
|
||||
-webkit-hyphens: none;
|
||||
-moz-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
}
|
||||
|
||||
pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
|
||||
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
|
||||
text-shadow: none;
|
||||
background: #b3d4fc;
|
||||
}
|
||||
|
||||
pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
|
||||
code[class*="language-"]::selection, code[class*="language-"] ::selection {
|
||||
text-shadow: none;
|
||||
background: #b3d4fc;
|
||||
}
|
||||
|
||||
@media print {
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Code blocks */
|
||||
pre[class*="language-"] {
|
||||
padding: 1em;
|
||||
margin: .5em 0;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
:not(pre) > code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
background: #f5f2f0;
|
||||
}
|
||||
|
||||
/* Inline code */
|
||||
:not(pre) > code[class*="language-"] {
|
||||
padding: .1em;
|
||||
border-radius: .3em;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.token.comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: slategray;
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.namespace {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
.token.property,
|
||||
.token.tag,
|
||||
.token.boolean,
|
||||
.token.number,
|
||||
.token.constant,
|
||||
.token.symbol,
|
||||
.token.deleted {
|
||||
color: #905;
|
||||
}
|
||||
|
||||
.token.selector,
|
||||
.token.attr-name,
|
||||
.token.string,
|
||||
.token.char,
|
||||
.token.builtin,
|
||||
.token.inserted {
|
||||
color: #690;
|
||||
}
|
||||
|
||||
.token.operator,
|
||||
.token.entity,
|
||||
.token.url,
|
||||
.language-css .token.string,
|
||||
.style .token.string {
|
||||
color: #9a6e3a;
|
||||
background: hsla(0, 0%, 100%, .5);
|
||||
}
|
||||
|
||||
.token.atrule,
|
||||
.token.attr-value,
|
||||
.token.keyword {
|
||||
color: #07a;
|
||||
}
|
||||
|
||||
.token.function,
|
||||
.token.class-name {
|
||||
color: #DD4A68;
|
||||
}
|
||||
|
||||
.token.regex,
|
||||
.token.important,
|
||||
.token.variable {
|
||||
color: #e90;
|
||||
}
|
||||
|
||||
.token.important,
|
||||
.token.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
.token.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.token.entity {
|
||||
cursor: help;
|
||||
}
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
white-space: pre-wrap;
|
||||
text-shadow: none;
|
||||
color: #222;
|
||||
background: none;
|
||||
}
|
||||
|
||||
pre[class*="language-"] {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.token.operator, .token.entity, .token.url, .language-css .token.string, .style .token.string {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.token.regex, .token.important, .token.variable {
|
||||
color: #a04a2f;
|
||||
}
|
||||
|
||||
.token.output {
|
||||
color: slategray;
|
||||
}
|
||||
|
|
@ -1,14 +1,22 @@
|
|||
# frozen_string_literal: true
|
||||
|
||||
require "rouge"
|
||||
|
||||
# Add more common shell commands
|
||||
Rouge::Lexers::Shell::BUILTINS << "|bin/rails|brew|bundle|gem|git|node|rails|rake|ruby|sqlite3|yarn"
|
||||
|
||||
module RailsGuides
|
||||
class Markdown
|
||||
class Renderer < Redcarpet::Render::HTML
|
||||
cattr_accessor :edge, :version
|
||||
|
||||
def block_code(code, language)
|
||||
formatter = Rouge::Formatters::HTML.new
|
||||
lexer = ::Rouge::Lexer.find_fancy(lexer_language(language))
|
||||
code = formatter.format(lexer.lex(code))
|
||||
<<-HTML
|
||||
<div class="code_container">
|
||||
<pre><code class="language-#{class_for(language)}">#{ERB::Util.h(code)}</code></pre>
|
||||
<pre><code class="highlight #{lexer_language(language)}">#{code}</code></pre>
|
||||
</div>
|
||||
HTML
|
||||
end
|
||||
|
|
@ -58,18 +66,16 @@ module RailsGuides
|
|||
end
|
||||
end
|
||||
|
||||
def class_for(code_type)
|
||||
def lexer_language(code_type)
|
||||
case code_type
|
||||
when "ruby", "sql", "plain", "js", "yaml"
|
||||
when "js", "html", "ruby", "sql", "yaml"
|
||||
code_type
|
||||
when "erb", "html+erb"
|
||||
"erb"
|
||||
when "html"
|
||||
"xml" # HTML is understood, but there are .xml rules in the CSS
|
||||
when "bash"
|
||||
"shell-session"
|
||||
"console"
|
||||
else
|
||||
"plain"
|
||||
"plaintext"
|
||||
end
|
||||
end
|
||||
|
||||
|
|
|
|||
|
|
@ -397,7 +397,7 @@ more human-readable format. The human-readable format is defined in your locale
|
|||
|
||||
* config/locales/app.pt-BR.yml
|
||||
|
||||
```yml
|
||||
```yaml
|
||||
pt-BR:
|
||||
activemodel:
|
||||
attributes:
|
||||
|
|
|
|||
|
|
@ -6,10 +6,8 @@
|
|||
<title><%= yield(:page_title) %></title>
|
||||
<link rel="stylesheet" type="text/css" href="stylesheets/style.css" data-turbolinks-track="reload">
|
||||
<link rel="stylesheet" type="text/css" href="stylesheets/print.css" media="print">
|
||||
<link rel="stylesheet" type="text/css" href="stylesheets/prism/default.css" data-turbolinks-track="reload">
|
||||
<link rel="stylesheet" type="text/css" href="stylesheets/prism/rails-guides.css" data-turbolinks-track="reload">
|
||||
<link rel="stylesheet" type="text/css" href="stylesheets/highlight.css" data-turbolinks-track="reload">
|
||||
<link href="images/favicon.ico" rel="shortcut icon" type="image/x-icon" />
|
||||
<script src="javascripts/prism.js" data-turbolinks-track="reload"></script>
|
||||
<script src="javascripts/turbolinks.js" data-turbolinks-track="reload"></script>
|
||||
<script src="javascripts/guides.js" data-turbolinks-track="reload"></script>
|
||||
<script src="javascripts/responsive-tables.js" data-turbolinks-track="reload"></script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue