Embedded Markdown supports Markdown in Rails views and syntax highlighting at your Markdown code block.
Installation
Add these lines to your application's Gemfile:
gem 'coderay' #optional for Syntax Highlighting
gem 'redcarpet'
gem 'emd'
And then execute:
bundle
Usage
Use it in a Markdown view markdown.html.md
- Create a
markdown.html.md
view atapp/view/home/markdown.html.md
and add the following Markdown code:
## This is a sample Markdown code
- [google](http://google.com)
- [emd](https://github.com/ytbryan/emd/)
-
Generate a home controller using the following command
rails generate controller home
-
Add the following line to
route.rb
:
get '/markdown', to: 'home#markdown'
- And finally, visit the Markdown view at http://localhost:3000/markdown
Use it in a Markdown partial _component.html.md
- Create a
_component.html.md
partial atapp/view/home/_component.html.md
:
### This is a component
- This is item 1
- This is iiem 2
- [This is a link to google] (http://google.com)
-
Use this partial using
<%= render "component" %>
within any view like athome/index.html.erb
-
Add the following line to
route.rb
:
get '/home', to: 'home#index'
- And finally, visit the Rails view with Markdown partial at http://localhost:3000/home
Syntax Highlighting
To support syntax highlighting, add coderay
to Gemfile as shown below:
gem 'coderay'
Remember to run bundle install
.
This will turn all the code block into:
```ruby
class Something
end
```
class Something
end
Also, you can enable inline code highlighting by adding code
style to your index.css
code {
background-color: rgba(27,31,35,.1);
border-radius: 3px;
font-size: 85%;
margin: 0;
padding: .2em .4em;
}
Enable number lines in your markdown's code block
To display number lines in your code block, add emd.js
in app/assets/javascripts/application.js
//= require emd
//= require_tree .
And add emd.css
in app/assets/stylesheets/application.css
*= require emd
*= require_self
Changing the color of the code block
To change the color of the code block, please use the following css selector:
div.code pre {
background-color: #fff;
}
The default color is #eee
Control which extensions Redcarpet uses
emd
assumes some sane redcarpet extension use (see redcarpets options here and here). If you need to overwrite these in your Rails app, create a file config/initializers/markdown_template_handler.rb
to overwrite the defaults from config/initializers/markdown_template_handler.rb like this:
module MarkdownTemplateHandler
def self.call(template)
compiled_source = erb.call(template)
%(Redcarpet::Markdown.new(Redcarpet::Render::HTML,
no_intra_emphasis: true,
fenced_code_blocks: true,
# I actually like that, so commented it out:
# disable_indented_code_blocks: true,
space_after_headers: true,
prettify: true,
tables: true,
with_toc_data: true,
autolink: true
).render(begin;#{compiled_source};end).html_safe)
end
end
Development
After checking out the repo, run bin/setup
to install dependencies. You can also run bin/console
for an interactive prompt that will allow you to experiment.
To install this gem onto your local machine, run bundle exec rake install
. To release a new version, update the version number in version.rb
, and then run bundle exec rake release
, which will create a git tag for the version, push git commits and tags, and push the .gem
file to rubygems.org.
Contributing
Bug reports and pull requests are welcome on GitHub at https://github.com/ytbryan/emd. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the Contributor Covenant code of conduct.
License
The gem is available as open source under the terms of the MIT License.
Special thanks to these folks for making emd possible
TODO
- Syntax highlighting
- Number lines in code block
- Tests
- Scaffolders
- Example repo
- Add a copy button to the code block
Benefits
EMD uses a Rails engine and a simple initializer to initiate a markdown template handler with the help of Redcarpet and syntax highlighting from Coderay.
The motivation is to reuse Markdown file in several of my Rails projects.
- 😊 Reuse Markdown in Rails products
- 📝 Allow copywriters & marketers to be involved in building your content easily
- 📝 Allows you to focus on the content instead of the webpage structure.
- 🙌 Supports syntax highlighting via Coderay