diff --git a/_includes/example.html b/_includes/example.html new file mode 100644 index 0000000000..24d12626b6 --- /dev/null +++ b/_includes/example.html @@ -0,0 +1,23 @@ +{%- comment -%} +Usage: {% include example.html content=markup %}, +where content is a capture with the HTML content +id - null (default) +class - "bd-example" (default) +optional: hide_preview - disabled (default) +optional: hide_markup - disabled (default) +{%- endcomment -%} + +{%- assign preview_id = include.id -%} +{%- assign preview_class = include.class -%} + +{%- if include.hide_preview == null -%} + + {{- include.content -}} + +{%- endif -%} + +{%- if include.hide_markup == null -%} + {%- highlight html -%} + {{- include.content | replace: 'data-src="holder.js', 'src="...' -}} + {%- endhighlight -%} +{%- endif -%} diff --git a/_plugins/example.rb b/_plugins/example.rb deleted file mode 100644 index 9132897206..0000000000 --- a/_plugins/example.rb +++ /dev/null @@ -1,95 +0,0 @@ -module Jekyll - module Tags - class ExampleBlock < Liquid::Block - include Liquid::StandardFilters - - # The regular expression syntax checker. Start with the language specifier. - # Follow that by zero or more space separated options that take one of three - # forms: name, name=value, or name="" - # - # is a space-separated list of numbers - SYNTAX = /^([a-zA-Z0-9.+#-]+)((\s+\w+(=((\w|[0-9_-])+|"([0-9]+\s)*[0-9]+"))?)*)$/ - - def initialize(tag_name, markup, tokens) - super - if markup.strip =~ SYNTAX - @lang = $1.downcase - @options = {} - if defined?($2) && $2 != '' - # Split along 3 possible forms -- key="", key=value, or key - $2.scan(/(?:\w+(?:=(?:(?:\w|[0-9_-])+|"[^"]*")?)?)/) do |opt| - key, value = opt.split('=') - # If a quoted list, convert to array - if value && value.include?("\"") - value.gsub!(/"/, "") - value = value.split - end - @options[key.to_sym] = value || true - end - end - @options[:linenos] = false - else - raise SyntaxError.new <<-eos -Syntax Error in tag 'example' while parsing the following markup: - - #{markup} - -Valid syntax: example [id=foo] -eos - end - end - - def render(context) - prefix = context["highlighter_prefix"] || "" - suffix = context["highlighter_suffix"] || "" - code = super.to_s.strip - - output = case context.registers[:site].highlighter - - when 'rouge' - render_rouge(code) - end - - rendered_output = example(code) + add_code_tag(output) - prefix + rendered_output + suffix - end - - def example(output) - "
\n#{output}\n
" - end - - def remove_holderjs(code) - code = code.gsub(/data-src="holder.js.+?"/, 'src="..."') - end - - def remove_example_classes(code) - # Find `bd-` classes and remove them from the highlighted code. Because of how this regex works, it will also - # remove classes that are after the `bd-` class. While this is a bug, I left it because it can be helpful too. - # To fix the bug, replace `(?=")` with `(?=("|\ ))`. - code = code.gsub(/(?!class=".)\ *?bd-.+?(?=")/, "") - # Find empty class attributes after the previous regex and remove those too. - code = code.gsub(/\ class=""/, "") - end - - def render_rouge(code) - require 'rouge' - formatter = Rouge::Formatters::HTML.new(line_numbers: @options[:linenos], wrap: false) - lexer = Rouge::Lexer.find_fancy(@lang, code) || Rouge::Lexers::PlainText - code = remove_holderjs(code) - code = remove_example_classes(code) - code = formatter.format(lexer.lex(code)) - "
#{code}
" - end - - def add_code_tag(code) - # Add nested tags to code blocks - code = code.sub(/
\n*/,'
')
-        code = code.sub(/\n*<\/pre>/,"
")
-        code.strip
-      end
-
-    end
-  end
-end
-
-Liquid::Template.register_tag('example', Jekyll::Tags::ExampleBlock)
diff --git a/docs/4.0/components/alerts.md b/docs/4.0/components/alerts.md
index 54739990eb..6c6cb99366 100644
--- a/docs/4.0/components/alerts.md
+++ b/docs/4.0/components/alerts.md
@@ -10,12 +10,13 @@ toc: true
 
 Alerts are available for any length of text, as well as an optional dismiss button. For proper styling, use one of the eight **required** contextual classes (e.g., `.alert-success`). For inline dismissal, use the [alerts jQuery plugin](#dismissing).
 
-{% example html %}
+{% capture example %}
 {% for color in site.data.theme-colors %}
 {% endfor %}
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 {% include callout-warning-color-assistive-technologies.md %}
 
@@ -23,25 +24,27 @@ Alerts are available for any length of text, as well as an optional dismiss butt
 
 Use the `.alert-link` utility class to quickly provide matching colored links within any alert.
 
-{% example html %}
+{% capture example %}
 {% for color in site.data.theme-colors %}
 {% endfor %}
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 ### Additional content
 
 Alerts can also contain additional HTML elements like headings, paragraphs and dividers.
 
-{% example html %}
+{% capture example %}
 
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 
 ### Dismissing
@@ -56,14 +59,15 @@ Using the alert JavaScript plugin, it's possible to dismiss any alert inline. He
 
 You can see this in action with a live demo:
 
-{% example html %}
+{% capture example %}
 
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 ## JavaScript behavior
 
diff --git a/docs/4.0/components/badge.md b/docs/4.0/components/badge.md
index f8967921e0..0e97cbe763 100644
--- a/docs/4.0/components/badge.md
+++ b/docs/4.0/components/badge.md
@@ -30,31 +30,34 @@ Badges scale to match the size of the immediate parent element by using relative
 
 Badges can be used as part of links or buttons to provide a counter.
 
-{% example html %}
+{% capture example %}
 
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 Note that depending on how they are used, badges may be confusing for users of screen readers and similar assistive technologies. While the styling of badges provides a visual cue as to their purpose, these users will simply be presented with the content of the badge. Depending on the specific situation, these badges may seem like random additional words or numbers at the end of a sentence, link, or button.
 
 Unless the context is clear (as with the "Notifications" example, where it is understood that the "4" is the number of notifications), consider including additional context with a visually hidden piece of additional text.
 
-{% example html %}
+{% capture example %}
 
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 ## Contextual variations
 
 Add any of the below mentioned modifier classes to change the appearance of a badge.
 
-{% example html %}
+{% capture example %}
 {% for color in site.data.theme-colors %}
 {{ color.name | capitalize }}{% endfor %}
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 {% include callout-warning-color-assistive-technologies.md %}
 
@@ -62,16 +65,18 @@ Add any of the below mentioned modifier classes to change the appearance of a ba
 
 Use the `.badge-pill` modifier class to make badges more rounded (with a larger `border-radius` and additional horizontal `padding`). Useful if you miss the badges from v3.
 
-{% example html %}
+{% capture example %}
 {% for color in site.data.theme-colors %}
 {{ color.name | capitalize }}{% endfor %}
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 ## Links
 
 Using the contextual `.badge-*` classes on an `` element quickly provide _actionable_ badges with hover and focus states.
 
-{% example html %}
+{% capture example %}
 {% for color in site.data.theme-colors %}
 {{ color.name | capitalize }}{% endfor %}
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
diff --git a/docs/4.0/components/breadcrumb.md b/docs/4.0/components/breadcrumb.md
index 2cbcc17b9e..9710f9a56c 100644
--- a/docs/4.0/components/breadcrumb.md
+++ b/docs/4.0/components/breadcrumb.md
@@ -9,7 +9,7 @@ group: components
 
 Separators are automatically added in CSS through [`::before`](https://developer.mozilla.org/en-US/docs/Web/CSS/::before) and [`content`](https://developer.mozilla.org/en-US/docs/Web/CSS/content).
 
-{% example html %}
+{% capture example %}
 
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 ## Accessibility
 
diff --git a/docs/4.0/components/button-group.md b/docs/4.0/components/button-group.md
index f02ded31b4..2261a5e729 100644
--- a/docs/4.0/components/button-group.md
+++ b/docs/4.0/components/button-group.md
@@ -10,13 +10,14 @@ toc: true
 
 Wrap a series of buttons with `.btn` in `.btn-group`. Add on optional JavaScript radio and checkbox style behavior with [our buttons plugin]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/buttons/#button-plugin).
 
-{% example html %}
+{% capture example %}
 

   
   
   
 

-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 {% capture callout %}
 ##### Ensure correct `role` and provide a label
@@ -31,7 +32,7 @@ In addition, groups and toolbars should be given an explicit label, as most assi
 
 Combine sets of button groups into button toolbars for more complex components. Use utility classes as needed to space out groups, buttons, and more.
 
-{% example html %}
+{% capture example %}
 
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 Feel free to mix input groups with button groups in your toolbars. Similar to the example above, you'll likely need some utilities though to space things properly.
 
-{% example html %}
+{% capture example %}
 
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 ## Sizing
 
@@ -118,7 +121,7 @@ Instead of applying button sizing classes to every button in a group, just add `
 
 Place a `.btn-group` within another `.btn-group` when you want dropdown menus mixed with a series of buttons.
 
-{% example html %}
+{% capture example %}
 

   
   
@@ -133,7 +136,8 @@ Place a `.btn-group` within another `.btn-group` when you want dropdown menus mi
     

   
 
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 ## Vertical variation
 
diff --git a/docs/4.0/components/buttons.md b/docs/4.0/components/buttons.md
index 926bc46624..52922d0923 100644
--- a/docs/4.0/components/buttons.md
+++ b/docs/4.0/components/buttons.md
@@ -11,12 +11,13 @@ toc: true
 
 Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.
 
-{% example html %}
+{% capture example %}
 {% for color in site.data.theme-colors %}
 {% endfor %}
 
 
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 {% include callout-warning-color-assistive-technologies.md %}
 
@@ -26,61 +27,68 @@ The `.btn` classes are designed to be used with the `
 
 
 
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 ## Outline buttons
 
 In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the `.btn-outline-*` ones to remove all background images and colors on any button.
 
-{% example html %}
+{% capture example %}
 {% for color in site.data.theme-colors %}
 {% endfor %}
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 ## Sizes
 
 Fancy larger or smaller buttons? Add `.btn-lg` or `.btn-sm` for additional sizes.
 
-{% example html %}
+{% capture example %}
 
 
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
-{% example html %}
+{% capture example %}
 
 
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 Create block level buttons—those that span the full width of a parent—by adding `.btn-block`.
 
-{% example html %}
+{% capture example %}
 
 
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 ## Active state
 
 Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. **There's no need to add a class to `
 
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 Disabled buttons using the `` element behave a bit different:
 
@@ -88,10 +96,11 @@ Disabled buttons using the `` element behave a bit different:
 - Some future-friendly styles are included to disable all `pointer-events` on anchor buttons. In browsers which support that property, you won't see the disabled cursor at all.
 - Disabled buttons should include the `aria-disabled="true"` attribute to indicate the state of the element to assistive technologies.
 
-{% example html %}
+{% capture example %}
 Primary link
 Link
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 {% capture callout %}
 ##### Link functionality caveat
@@ -108,11 +117,12 @@ Do more with buttons. Control button states or create groups of buttons for more
 
 Add `data-toggle="button"` to toggle a button's `active` state. If you're pre-toggling a button, you must manually add the `.active` class **and** `aria-pressed="true"` to the `
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 ### Checkbox and radio buttons
 
@@ -122,15 +132,16 @@ The checked state for these buttons is **only updated via `click` event** on the
 
 Note that pre-checked buttons require you to manually add the `.active` class to the input's `