# 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; }







