# Terminal
rails action_text:install
rails g scaffold comments
rails db:migrate
yarn add highlight.js

# javascript/packs/application.js
import 'highlight'

# javascript/highlight/index.js
// import hljs from 'highlight.js'
import hljs from 'highlight.js/lib/highlight'
# Recently, I've found that this path is required import hljs from 'highlight.js/lib/core'
import 'highlight.js/styles/gruvbox-dark.css'

// hljs.registerLanguage('ruby', require('highlight.js/lib/languages/ruby'));
// hljs.registerLanguage('erb', require('highlight.js/lib/languages/erb'));
// hljs.registerLanguage('bash', require('highlight.js/lib/languages/bash'));
// hljs.registerLanguage('javascript', require('highlight.js/lib/languages/javascript'));

import ruby from 'highlight.js/lib/languages/ruby'
hljs.registerLanguage('ruby', ruby);

import erb from 'highlight.js/lib/languages/erb'
hljs.registerLanguage('erb', erb);

import bash from 'highlight.js/lib/languages/bash'
hljs.registerLanguage('bash', bash);

import javascript from 'highlight.js/lib/languages/javascript'
hljs.registerLanguage('javascript', javascript);

// hljs.configure({ languages: ['ruby', 'erb', 'bash', 'javascript'] })
document.addEventListener('turbolinks:load', (event) => {
  document.querySelectorAll('pre').forEach((block) => {
    hljs.highlightBlock(block)
  })
})

# models/comment.rb
class Comment < ApplicationRecord
  has_rich_text :content
end

# comments_controller.rb
def comment_params
  params.require(:comment).permit(:content)
end

# views/comments/index.html.erb
<% @comments.each do |comment| %>
  <div class='well'>
    <%= comment.content %>
  </div>
  <div>
    <%= link_to 'Edit', edit_comment_path(comment) %>
    <%= link_to 'Destroy', comment, method: :delete, data: { confirm: 'Are you sure?' } %>
  </div>
<% end %>

<%# render 'form', comment: current_user.comments.new if user_signed_in? %>
<%= render 'form', comment: Comment.new %>

# views/comments/_form.html.erb
<%= form_with(model: comment, local: true) do |form| %>
  <%= form.rich_text_area :content %>
  <div class="actions">
    <%= form.submit %>
  </div>
<% end %>

# app/assets/stylesheets/actiontext.scss
.trix-content {
  pre.hljs {
    background: #282828
  }
}

trix-editor {
  min-height: 250px;
}