add red carpet for optional markdown and some css fixes

Gemfile

···
   gem "capybara"
   gem "selenium-webdriver"
 end
+
+gem "redcarpet", "~> 3.6"

Gemfile.lock

···
     rake (13.2.1)
     rdoc (6.6.3.1)
       psych (>= 4.0.0)
+    redcarpet (3.6.0)
     regexp_parser (2.9.0)
     reline (0.5.2)
       io-console (~> 0.5)
···
   pry
   puma (>= 5.0)
   rails (~> 7.1.3, >= 7.1.3.2)
+  redcarpet (~> 3.6)
   selenium-webdriver
   sprockets-rails
   sqlite3 (~> 1.4)

app/assets/config/manifest.js

···
 //= link_tree ../images
+//= link_tree ../fonts
 //= link_directory ../stylesheets .css
 //= link_tree ../../javascript .js
 //= link_tree ../../../vendor/javascript .js

app/assets/stylesheets/application.css

···
  @font-face {
   font-family: 'Raleway';
   font-weight: 400;
-  src: url('Raleway-VariableFont_wght.ttf');
+  src: url("Raleway-VariableFont_wght.ttf");
 }
 
 @font-face {
 	font-family: 'Gudea';
-	src: url ('Gudea-Regular.ttf')
+	src: url("Gudea-Regular.ttf")
 }
 
 body {
 background: url('bg5.jpg') repeat;
-font: 1em 'Raleway', 'courier new';
+font-family: 'Raleway', 'sans-serif';
+font-size: 1.1rem;
 }
 
 .main {
···
 
 a:link, a:link:active, a:visited, a:visited:active {
 color: #509145;
-font-family: 'Gudea', sans-serif
+font-family: inherit;
 }
 
 a:hover {
···
 margin: 1em 0 1em 0;
 }
 
-.article_date {
+div.article_date {
 /* color: #4f6599; */
 text-transform: lowercase;
 font-family: 'Gudea', sans-serif;
+margin-top:1em;
+font-size:1.1rem;
 }
 
 div.article_date_text {
···
 }
 
 .pbody code.inline {
-	display: inline-block;
+font-family: 'Gudea', sans-serif;
+display: inline-block;
 }
 
 .pbody code {
+font-family: 'Gudea', sans-serif; 
 color: #509145;
 padding-left: 2em;
 display: block;
···
 margin-top: 1em;
 }
 
+span.tag_link {
+font-family: 'Gudea', sans-serif;
+display: inline-block;
+font-size: 1em;
+}

app/helpers/application_helper.rb

···
 module ApplicationHelper
+
+def markdown(text)
+    options = [:hard_wrap, :autolink, :no_intra_emphasis, :fenced_code_blocks, :underline,
+    :highlight, :safe_links_only, :prettify, :no_styles]
+    Markdown.new(text, *options).to_html.html_safe
+  end
+
 end

app/javascript/application.js

···
 // Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
 
 import * as AsciinemaPlayer from 'asciinema-player';
+import "@github/markdown-toolbar-element"

app/views/action_markdown/contents/_content.html.erb

···
+<div class="action-markdown">
+  <%= sanitize content.to_html %>
+</div>

app/views/articles/_form.html.erb

···
 
   <div>
     <%= form.label :body %><br>
-    <%= form.text_area :body %><br>
+    <%= form.text_area :body, style: "width: 100%; height: 50vh;", rows: 8 %><br>
     <% article.errors.full_messages_for(:body).each do |message| %>
       <div><%= message %></div>
     <% end %>

app/views/articles/show.html.erb

···
     <%= image_tag url_for(@article.icon) %>
 <% end %>
 
-<p class="article_date"><div class="article_date_text"><%= @article.created_at.strftime('%Y %b %d') %></div> | <%= link_to @article.tag.name, @article.tag %></p>
+<div class="article_date">
+<div class="article_date_text"><%= @article.created_at.strftime('%Y %b %d') %></div> <span class="tag_link">| <%= link_to @article.tag.name, @article.tag %></span>
+</div>
 
-<div class="pbody"><%== @article.body %></div>
+<div class="pbody"><%== markdown(@article.body) %></div>
 
 <% if user_signed_in? %>
 <p>

config/importmap.rb

···
 
 pin "application"
 pin "asciinema-player" # @3.8.1
+pin "@github/markdown-toolbar-element", to: "https://ga.jspm.io/npm:@github/markdown-toolbar-element@2.1.1/dist/index.js"