### Install RicherText Gem

Source: https://github.com/afomera/richer_text/blob/main/README.md

Adds the RicherText gem to your application's Gemfile and installs it using Bundler.

```ruby
gem "richer_text"

$ bundle
```

--------------------------------

### Run RicherText Rails Generator

Source: https://github.com/afomera/richer_text/blob/main/README.md

Executes the RicherText installation generator to set up necessary files and configurations.

```bash
$ rails richer_text:install
```

--------------------------------

### Configure highlight.js for Code Highlighting

Source: https://github.com/afomera/richer_text/blob/main/README.md

Adds JavaScript code to your entry point to enable highlight.js for code blocks when using RicherText.

```javascript
const hljs = require("highlight.js");

document.addEventListener("turbo:load", (event) => {
  document.querySelectorAll("pre").forEach((block) => {
    hljs.highlightElement(block);
  });
});
```

--------------------------------

### 404 Error Page Styling

Source: https://github.com/afomera/richer_text/blob/main/test/dummy/public/404.html

Provides CSS styles for a default Rails 404 error page, defining layout, colors, fonts, and box shadows for a consistent appearance.

```CSS
.rails-default-error-page {
  background-color: #EFEFEF;
  color: #2E2F30;
  text-align: center;
  font-family: arial, sans-serif;
  margin: 0;
}

.rails-default-error-page div.dialog {
  width: 95%;
  max-width: 33em;
  margin: 4em auto 0;
}

.rails-default-error-page div.dialog > div {
  border: 1px solid #CCC;
  border-right-color: #999;
  border-left-color: #999;
  border-bottom-color: #BBB;
  border-top: #B00100 solid 4px;
  border-top-left-radius: 9px;
  border-top-right-radius: 9px;
  background-color: white;
  padding: 7px 12% 0;
  box-shadow: 0 3px 8px rgba(50, 50, 50, 0.17);
}

.rails-default-error-page h1 {
  font-size: 100%;
  color: #730E15;
  line-height: 1.5em;
}

.rails-default-error-page div.dialog > p {
  margin: 0 0 1em;
  padding: 1em;
  background-color: #F7F7F7;
  border: 1px solid #CCC;
  border-right-color: #999;
  border-left-color: #999;
  border-bottom-color: #999;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  border-top-color: #DADADA;
  color: #666;
  box-shadow: 0 3px 8px rgba(50, 50, 50, 0.17);
}
```

--------------------------------

### Rejected Change Error Message

Source: https://github.com/afomera/richer_text/blob/main/test/dummy/public/422.html

A user-facing message indicating that a requested change was rejected, likely due to insufficient permissions. It suggests checking logs for more detailed information.

```text
The change you wanted was rejected (422)  .

The change you wanted was rejected.
===================================

Maybe you tried to change something you didn't have access to.

If you are the application owner check the logs for more information.
```

--------------------------------

### Rails Default Error Page Styling

Source: https://github.com/afomera/richer_text/blob/main/test/dummy/public/422.html

Provides CSS styles for a default error page in a Rails application, including layout, typography, and box shadows for a visually distinct error presentation.

```css
.rails-default-error-page { background-color: #EFEFEF; color: #2E2F30; text-align: center; font-family: arial, sans-serif; margin: 0; }
.rails-default-error-page div.dialog { width: 95%; max-width: 33em; margin: 4em auto 0; }
.rails-default-error-page div.dialog > div { border: 1px solid #CCC; border-right-color: #999; border-left-color: #999; border-bottom-color: #BBB; border-top: #B00100 solid 4px; border-top-left-radius: 9px; border-top-right-radius: 9px; background-color: white; padding: 7px 12% 0; box-shadow: 0 3px 8px rgba(50, 50, 50, 0.17); }
.rails-default-error-page h1 { font-size: 100%; color: #730E15; line-height: 1.5em; }
.rails-default-error-page div.dialog > p { margin: 0 0 1em; padding: 1em; background-color: #F7F7F7; border: 1px solid #CCC; border-right-color: #999; border-left-color: #999; border-bottom-color: #999; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-color: #DADADA; color: #666; box-shadow: 0 3px 8px rgba(50, 50, 50, 0.17); }
```

--------------------------------

### Add has_richer_text to a Model

Source: https://github.com/afomera/richer_text/blob/main/README.md

Configures a Rails model to use RicherText for a specific attribute, recommending JSON storage for TipTap compatibility.

```ruby
class Post < ApplicationRecord
  has_richer_text :body, store_as: :json
end
```

--------------------------------

### Use richer_text_area Form Helper

Source: https://github.com/afomera/richer_text/blob/main/README.md

Integrates the RicherText editor into a Rails form for a specified attribute, with optional arguments like `callouts` and `placeholder`.

```erb
<%= form.label :body %>
<%= form.richer_text_area :body %>

<%= form.label :body %>
<%= form.richer_text_area :body, callouts: true, placeholder: "Write something..." %>
```

--------------------------------

### Render Richer Text Content

Source: https://github.com/afomera/richer_text/blob/main/README.md

Displays the content of a RicherText-enabled attribute in a Rails view.

```erb
<%= @post.body %>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.