Commonmarker syntax highlight theme using Tailwind CSS colors
to run in your site's root directory
View template source
THEMES = {
"dark" => <<~XML,
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>name</key>
<string>Tailwind Slate Dark</string>
<key>author</key>
<string>Rails Designer</string>
<key>uuid</key>
<string>A4299D9B-1DE5-4BC4-87F6-A757E71B1597</string>
<key>settings</key>
<array>
<dict>
<key>settings</key>
<dict>
<key>background</key>
<string>#0f172a</string>
<key>foreground</key>
<string>#e2e8f0</string>
<key>caret</key>
<string>#cbd5e1</string>
<key>selection</key>
<string>#334155</string>
<key>selectionForeground</key>
<string>#f1f5f9</string>
<key>lineHighlight</key>
<string>#1e293b</string>
</dict>
</dict>
<dict>
<key>name</key>
<string>Comment</string>
<key>scope</key>
<string>comment</string>
<key>settings</key>
<dict>
<key>foreground</key>
<string>#64748b</string>
<key>fontStyle</key>
<string>italic</string>
</dict>
</dict>
<dict>
<key>name</key>
<string>Keyword</string>
<key>scope</key>
<string>keyword, storage.type, storage.modifier</string>
<key>settings</key>
<dict>
<key>foreground</key>
<string>#a78bfa</string>
<key>fontStyle</key>
<string>bold</string>
</dict>
</dict>
<dict>
<key>name</key>
<string>String</string>
<key>scope</key>
<string>string</string>
<key>settings</key>
<dict>
<key>foreground</key>
<string>#34d399</string>
</dict>
</dict>
<dict>
<key>name</key>
<string>Number</string>
<key>scope</key>
<string>constant.numeric</string>
<key>settings</key>
<dict>
<key>foreground</key>
<string>#fb7185</string>
</dict>
</dict>
<dict>
<key>name</key>
<string>Function</string>
<key>scope</key>
<string>entity.name.function, support.function</string>
<key>settings</key>
<dict>
<key>foreground</key>
<string>#60a5fa</string>
</dict>
</dict>
<dict>
<key>name</key>
<string>Class</string>
<key>scope</key>
<string>entity.name.class, entity.name.type</string>
<key>settings</key>
<dict>
<key>foreground</key>
<string>#fbbf24</string>
</dict>
</dict>
<dict>
<key>name</key>
<string>Variable</string>
<key>scope</key>
<string>variable</string>
<key>settings</key>
<dict>
<key>foreground</key>
<string>#e2e8f0</string>
</dict>
</dict>
<dict>
<key>name</key>
<string>Operator</string>
<key>scope</key>
<string>keyword.operator</string>
<key>settings</key>
<dict>
<key>foreground</key>
<string>#94a3b8</string>
</dict>
</dict>
<dict>
<key>name</key>
<string>Punctuation</string>
<key>scope</key>
<string>punctuation</string>
<key>settings</key>
<dict>
<key>foreground</key>
<string>#94a3b8</string>
</dict>
</dict>
<dict>
<key>name</key>
<string>Constant</string>
<key>scope</key>
<string>constant</string>
<key>settings</key>
<dict>
<key>foreground</key>
<string>#f472b6</string>
</dict>
</dict>
<dict>
<key>name</key>
<string>Tag</string>
<key>scope</key>
<string>entity.name.tag</string>
<key>settings</key>
<dict>
<key>foreground</key>
<string>#a78bfa</string>
</dict>
</dict>
<dict>
<key>name</key>
<string>Attribute</string>
<key>scope</key>
<string>entity.other.attribute-name</string>
<key>settings</key>
<dict>
<key>foreground</key>
<string>#60a5fa</string>
</dict>
</dict>
</array>
</dict>
</plist>
XML
"light" => <<~XML,
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>name</key>
<string>Tailwind Gray Light</string>
<key>author</key>
<string>Rails Designer</string>
<key>uuid</key>
<string>f8e7d6c5-b4a3-4928-9182-736455667788</string>
<key>settings</key>
<array>
<dict>
<key>settings</key>
<dict>
<key>background</key>
<string>#f8fafc</string>
<key>foreground</key>
<string>#1f2937</string>
<key>caret</key>
<string>#374151</string>
<key>selection</key>
<string>#d1d5db</string>
<key>selectionForeground</key>
<string>#111827</string>
<key>lineHighlight</key>
<string>#f9fafb</string>
</dict>
</dict>
<dict>
<key>name</key>
<string>Comment</string>
<key>scope</key>
<string>comment</string>
<key>settings</key>
<dict>
<key>foreground</key>
<string>#9ca3af</string>
<key>fontStyle</key>
<string>italic</string>
</dict>
</dict>
<dict>
<key>name</key>
<string>Keyword</string>
<key>scope</key>
<string>keyword, storage.type, storage.modifier</string>
<key>settings</key>
<dict>
<key>foreground</key>
<string>#7c3aed</string>
<key>fontStyle</key>
<string>bold</string>
</dict>
</dict>
<dict>
<key>name</key>
<string>String</string>
<key>scope</key>
<string>string</string>
<key>settings</key>
<dict>
<key>foreground</key>
<string>#059669</string>
</dict>
</dict>
<dict>
<key>name</key>
<string>Number</string>
<key>scope</key>
<string>constant.numeric</string>
<key>settings</key>
<dict>
<key>foreground</key>
<string>#e11d48</string>
</dict>
</dict>
<dict>
<key>name</key>
<string>Function</string>
<key>scope</key>
<string>entity.name.function, support.function</string>
<key>settings</key>
<dict>
<key>foreground</key>
<string>#2563eb</string>
</dict>
</dict>
<dict>
<key>name</key>
<string>Class</string>
<key>scope</key>
<string>entity.name.class, entity.name.type</string>
<key>settings</key>
<dict>
<key>foreground</key>
<string>#d97706</string>
</dict>
</dict>
<dict>
<key>name</key>
<string>Variable</string>
<key>scope</key>
<string>variable</string>
<key>settings</key>
<dict>
<key>foreground</key>
<string>#1f2937</string>
</dict>
</dict>
<dict>
<key>name</key>
<string>Operator</string>
<key>scope</key>
<string>keyword.operator</string>
<key>settings</key>
<dict>
<key>foreground</key>
<string>#6b7280</string>
</dict>
</dict>
<dict>
<key>name</key>
<string>Punctuation</string>
<key>scope</key>
<string>punctuation</string>
<key>settings</key>
<dict>
<key>foreground</key>
<string>#6b7280</string>
</dict>
</dict>
<dict>
<key>name</key>
<string>Constant</string>
<key>scope</key>
<string>constant</string>
<key>settings</key>
<dict>
<key>foreground</key>
<string>#db2777</string>
</dict>
</dict>
<dict>
<key>name</key>
<string>Tag</string>
<key>scope</key>
<string>entity.name.tag</string>
<key>settings</key>
<dict>
<key>foreground</key>
<string>#7c3aed</string>
</dict>
</dict>
<dict>
<key>name</key>
<string>Attribute</string>
<key>scope</key>
<string>entity.other.attribute-name</string>
<key>settings</key>
<dict>
<key>foreground</key>
<string>#2563eb</string>
</dict>
</dict>
</array>
</dict>
</plist>
XML
}
abort set_color("Commonmarker is not installed. Please make sure it is installed. Run `bundle add commonmarker`.", :red, :bold) unless defined?(::Commonmarker)
say "Available themes: #{THEMES.keys.join(", ")}"
theme = ask("Which theme do you want?").downcase.strip
abort "Invalid theme. Choose from: #{THEMES.join(", ")}" if THEMES.exclude?(theme)
create_file "app/themes/#{theme}.tmTheme", THEMES[theme]
inject_into_file "config/initializers/perron.rb", before: /^end\s*$/ do
<<~RUBY.indent(2)
config.markdown_options = {
plugins: {
syntax_highlighter: {
theme: "#{theme}",
path: Rails.root.join("app", "themes").to_s
}
}
}
RUBY
end
A snippet to add a syntax highlight theme for Commonmarker (one of the supported markdown parsers in Perron). Comes in both a dark and light version. The theme will be copied into app/themes/ and the configuration will be added to your Perron initializer.