### Extend Content Types for Better HTML Parsing

Source: https://github.com/shopify/better-html/blob/main/README.md

This example shows how to extend Better HTML's parsing capabilities to include additional file types beyond the default `.html.erb` by assigning the `BetterErb` implementation.

```Ruby
# config/initializers/better_html.rb
impl = BetterHtml::BetterErb.content_types['html.erb']
BetterHtml::BetterErb.content_types['htm.erb'] = impl
BetterHtml::BetterErb.content_types['atom.erb'] = impl
BetterHtml::BetterErb.content_types['html+variant.erb'] = impl
```

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

### Configure Better HTML with YAML

Source: https://github.com/shopify/better-html/blob/main/README.md

Shows an alternative configuration method for Better HTML, loading settings from a YAML file, including permitted classes for Regexp.

```Ruby
# config/initializers/better_html.rb
BetterHtml.config = BetterHtml::Config.new(YAML.load_file(file_path, permitted_classes: [Regexp]))
```

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

### Style Error Dialogs with CSS

Source: https://github.com/shopify/better-html/blob/main/test/dummy/public/422.html

Provides CSS styles for a rejection dialog, including background color, text alignment, font, and specific styling for dialog containers, headings, and paragraphs. This ensures a consistent and informative error display.

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

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

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

h1 {
  font-size: 100%;
  color: #730E15;
  line-height: 1.5em;
}

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);
}
```

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

### Parse HTML+ERB with Better HTML Parser

Source: https://github.com/shopify/better-html/blob/main/README.md

This snippet demonstrates how to use the Better HTML gem's ERB parser to process an HTML+ERB string and generate an Abstract Syntax Tree (AST). It requires the 'better_html/parser' library and involves creating a source buffer with the template content, initializing the parser, and then inspecting the resulting AST.

```ruby
require 'better_html/parser'

buffer = Parser::Source::Buffer.new('(buffer)')
buffer.source = '<div><%= value -%></div>'
parser = BetterHtml::Parser.new(buffer)

puts parser.inspect
# => #<BetterHtml::Parser ast=s(:document,
#   s(:tag, nil,
#     s(:tag_name, "div"), nil, nil),
#   s(:text,
#     s(:erb,
#       s(:indicator, "="), nil,
#       s(:code, " value "),
#       s(:trim))),
#   s(:tag,
#     s(:solidus),
#     s(:tag_name, "div"), nil, nil))>
```

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

### Include Better HTML Helpers

Source: https://github.com/shopify/better-html/blob/main/README.md

Demonstrates how to include the `BetterHtml::Helpers` module in your `ApplicationHelper` to use helpers like `html_attributes`.

```Ruby
module ApplicationHelper
  include BetterHtml::Helpers

  ...
end
```

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

### Configure Better HTML Globally

Source: https://github.com/shopify/better-html/blob/main/README.md

This code illustrates how to configure Better HTML globally in a Rails initializer file (`config/initializers/better_html.rb`), disabling single-quoted attributes.

```Ruby
# config/initializers/better_html.rb
BetterHtml.configure do |config|
  config.allow_single_quoted_attributes = false
end
```

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

### Allowed ERB Syntax: Conditional Attributes with `html_attributes`

Source: https://github.com/shopify/better-html/blob/main/README.md

Demonstrates the recommended way to insert conditional HTML attributes using the `html_attributes` helper provided by Better HTML.

```HTML ERB
<img <%= html_attributes(class: 'hidden') if condition? %>>
```

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

### Allowed ERB Syntax: JavaScript Expressions in Script Tags

Source: https://github.com/shopify/better-html/blob/main/README.md

Illustrates the correct usage of ERB interpolation (`<%==`) for JavaScript expressions within `<script>` tags, ensuring safety.

```HTML ERB
<script>
  // Allowed ✅
  var myValue = <%== value.to_json %>;
  if(myValue)
    doSomething();
</script>
```

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

### Add Better HTML Gem to Gemfile

Source: https://github.com/shopify/better-html/blob/main/README.md

This snippet shows how to add the 'better_html' gem to your Rails application's Gemfile to enable its features.

```Ruby
gem "better_html"
```

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

### Test ERB Template Parseability

Source: https://github.com/shopify/better-html/blob/main/README.md

This Ruby code snippet shows how to test if all `.html.erb` templates in a Rails application are parseable. It uses `BetterHtml::BetterErb::ErubiImplementation.new(data, filename:).validate!` to check for HTML errors.

```ruby
# frozen_string_literal: true

require 'test_helper'

class ErbImplementationTest < ActiveSupport::TestCase
  ERB_GLOB = Rails.root.join(
    'app', 'views', '**', '{*.htm,*.html,*.htm.erb,*.html.erb,*.html+*.erb}'
  )

  Dir[ERB_GLOB].each do |filename|
    pathname = Pathname.new(filename).relative_path_from(Rails.root)
    test "html errors in #{pathname}" do
      data = File.read(filename)
      BetterHtml::BetterErb::ErubiImplementation.new(data, filename:).validate!
    end
  end
end

```

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

### Allowed ERB Syntax: Interpolation in Tag/Attribute Names

Source: https://github.com/shopify/better-html/blob/main/README.md

Shows valid ERB syntax for interpolating values into HTML tag names or attribute names, as permitted by Better HTML.

```HTML ERB
<img data-<%= value %>="true">

<ns:<%= value %>>
```

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

### Allowed ERB Syntax: Interpolation in Quoted Attributes

Source: https://github.com/shopify/better-html/blob/main/README.md

Demonstrates the correct usage of ERB interpolation within quoted HTML attributes, which is allowed by Better HTML.

```HTML ERB
<img class="<%= value %>">
```

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

### Disallowed ERB Syntax: Interpolation in Unquoted Attributes

Source: https://github.com/shopify/better-html/blob/main/README.md

Illustrates ERB syntax that is not allowed by Better HTML, specifically interpolation directly into unquoted HTML attributes.

```HTML ERB
<img <%= value %>>

<img class=<%= value %>>
```

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

### Test ERB Safety with SafeErbTester

Source: https://github.com/shopify/better-html/blob/main/README.md

This Ruby code snippet demonstrates how to use the `SafeErbTester` from the `better-html` gem to test ERB files for missing JavaScript escapes. It iterates through all ERB files in the application's views directory and asserts their safety.

```ruby
# frozen_string_literal: true

require 'test_helper'
require 'better_html/test_helper/safe_erb_tester'

class ErbSafetyTest < ActiveSupport::TestCase
  include BetterHtml::TestHelper::SafeErbTester
  ERB_GLOB = Rails.root.join(
    'app', 'views', '**', '{*.htm,*.html,*.htm.erb,*.html.erb,*.html+*.erb}'
  )

  Dir[ERB_GLOB].each do |filename|
    pathname = Pathname.new(filename).relative_path_from(Rails.root)
    test "missing javascript escapes in #{pathname}" do
      assert_erb_safety(File.read(filename), filename:)
    end
  end
end

```

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

### Styling for 404 Error Page (CSS)

Source: https://github.com/shopify/better-html/blob/main/test/dummy/public/404.html

This CSS code defines the visual appearance of the 404 error page. It sets background colors, text alignment, fonts, and styles for dialog boxes, headings, and paragraphs to create a user-friendly error message.

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

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

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

h1 {
  font-size: 100%;
  color: #730E15;
  line-height: 1.5em;
}

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);
}
```

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

### Disallowed ERB Syntax: Interpolation with Missing Space

Source: https://github.com/shopify/better-html/blob/main/README.md

Highlights an invalid ERB syntax pattern where interpolation is used without a required space after the closing quote of an attribute.

```HTML ERB
<img class="hidden"<%= value %>>
```

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

### Disallowed ERB Syntax: Conditional Attributes with `if` statement

Source: https://github.com/shopify/better-html/blob/main/README.md

Shows an alternative method for conditional attributes that is not allowed by Better HTML, using a direct ERB `if` statement.

```HTML ERB
<img <% if condition? %>class="hidden"<% end %>>
```

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

### Disallowed ERB Syntax: JavaScript Statements in Script Tags

Source: https://github.com/shopify/better-html/blob/main/README.md

Highlights ERB syntax that is not permitted within `<script>` tags by Better HTML, specifically using ERB statements (`<%`) for conditional logic.

```HTML ERB
<script>
  // Not allowed ❌
  <% if value %>
    doSomething();
  <% end %>
</script>
```

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

### RSpec Test for ERB Template Parseability

Source: https://github.com/shopify/better-html/blob/main/README.md

This RSpec code snippet verifies that all `.html.erb` templates in a Rails application are parseable. It iterates through the templates and asserts that no exceptions are raised during the validation process using `BetterHtml::BetterErb::ErubiImplementation.new(data, filename:).validate!`.

```rspec
# frozen_string_literal: true

require "rails_helper"

RSpec.describe "BetterHtml" do
  it "does assert that all .html.erb templates are parseable" do
    erb_glob = Rails.root.join(
      "app", "views", "**", "{*.htm,*.html,*.htm.erb,*.html.erb,*.html+*.erb}"
    )

    Dir[erb_glob].each do |filename|
      data = File.read(filename)
      expect {
        BetterHtml::BetterErb::ErubiImplementation.new(data, filename:).validate!
      }.not_to raise_exception
    end
  end
end

```

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

### Validate Raw Text Content in ERB Tags

Source: https://github.com/shopify/better-html/blob/main/README.md

Provides runtime validation for content within 'raw text' tags like <textarea> and <script>. It checks for substrings like '</textarea>' to prevent XSS attacks when user-controlled data is interpolated.

```erb
<textarea>
  <%== value %>
</textarea>

```

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

### Validate HTML Tag and Attribute Name Interpolation in ERB

Source: https://github.com/shopify/better-html/blob/main/README.md

Validates that interpolated values used in HTML tag or attribute names are safe. It ensures that only valid characters for attribute names are used, preventing injection attacks.

```erb
<img data-<%= value %>="true">

```

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

### Validate HTML Attribute Interpolation in ERB

Source: https://github.com/shopify/better-html/blob/main/README.md

Ensures that interpolated values within HTML attributes are safe and do not contain characters that could break the attribute or lead to XSS. It wraps the value in a runtime safety check that raises an exception for invalid characters.

```erb
<img class="<%= value %>">

```

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