+ {% comment %}
{% include layout/sidenav.html dark=page.sidenav-dark folded=page.sidenav-folded fixed=true %}
+ {% endcomment %}
{% include layout/topnav.html dark=page.header-dark sticky=page.header-sticky %}
diff --git a/pages/_plugins/jekyll-example.rb b/pages/_plugins/jekyll-example.rb
index 06e6e9b2a..a618f602c 100644
--- a/pages/_plugins/jekyll-example.rb
+++ b/pages/_plugins/jekyll-example.rb
@@ -1,100 +1,98 @@
require 'htmlbeautifier'
+def render_rouge(code, lang, line_numbers = false)
+ require 'rouge'
+ formatter = Rouge::Formatters::HTML.new(line_numbers: line_numbers, wrap: false)
+ lexer = Rouge::Lexer.find_fancy(lang, code) || Rouge::Lexers::PlainText
+
+ code = HtmlBeautifier.beautify(code, indent: "\t")
+
+ code = code.gsub(/
.*?<\/hide>/, "")
+ code = formatter.format(lexer.lex(code))
+ code = code.strip.gsub /^[\t\s]*$\n/, ''
+ code = code.gsub /\t/, "\s\s\s"
+ code = code.gsub "javascript:void(0)", "#"
+ code = code.gsub "../", "./"
+
+
+ ""
+end
+
+def add_code_tag(code, lang)
+ code = code.sub(/\n*/, '')
+ code = code.sub(/\n*<\/pre>/, "
")
+ code.strip
+end
+
module Jekyll
- module Tags
- class ExampleBlock < Liquid::Block
- include Liquid::StandardFilters
+ class ExampleBlock < Liquid::Block
+ include Liquid::StandardFilters
- SYNTAX = /^([a-zA-Z0-9.+#-]+)((\s+[\w-]+(=((\w|[0-9_-])+|"([0-9]+\s)*[0-9]+"))?)*)$/
+ 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 == ""
- markup = 'html'
- end
+ def initialize(tag_name, markup, tokens)
+ super
+ if markup.strip == ""
+ markup = 'html'
+ end
- 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
+ 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
- @options[:linenos] = false
- else
- raise SyntaxError.new <<-eos
+ 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
+ eos
end
+ end
- def render(context)
- prefix = context["highlighter_prefix"] || ""
- suffix = context["highlighter_suffix"] || ""
- code = super.to_s.strip
+ def render(context)
+ prefix = context["highlighter_prefix"] || ""
+ suffix = context["highlighter_suffix"] || ""
+ code = super.to_s.strip
- output = case context.registers[:site].highlighter
+ output = case context.registers[:site].highlighter
- when 'rouge'
- render_rouge(code)
- end
+ when 'rouge'
+ render_rouge(code, @lang, @options[:linenos])
+ end
- # output = HtmlBeautifier.beautify(output, indent: "\t")
+ rendered_output = example(code) + add_code_tag(output, @lang)
+ prefix + rendered_output + suffix
+ end
- rendered_output = example(code) + add_code_tag(output)
- prefix + rendered_output + suffix
- end
+ def example(output)
+ output = output.gsub(//, "").gsub(/<\/hide>/, "")
- def example(output)
- output = output.gsub(//, "").gsub(/<\/hide>/, "")
+ "\n" + (@options[:columns] ? "
\n" : "") + (@options[:wrapper] ? "
\n" : "") + (@options[:"max-width"] ? "
\n" : "") + "#{output}" + (@options[:wrapper] ? "\n
" : "") + (@options[:columns] ? "\n
" : "") + (@options[:"max-width"] ? "\n
" : "") + "\n
\n" + (@options[:columns] ? "
\n" : "") + (@options[:wrapper] ? "
\n" : "") + (@options[:"max-width"] ? "
\n" : "") + "#{output}" + (@options[:wrapper] ? "\n
" : "") + (@options[:columns] ? "\n
" : "") + (@options[:"max-width"] ? "\n
" : "") + "\n
tags to code blocks
- code = code.sub(/\n*/, '')
- code = code.sub(/\n*<\/pre>/, "
")
- code.strip
- end
+ end
+ module HightlightFilter
+ def highlight_tidy(code, language = 'html')
+ code = render_rouge(code, language)
+ add_code_tag(code, language)
end
end
end
-Liquid::Template.register_tag('example', Jekyll::Tags::ExampleBlock)
+Liquid::Template.register_tag('example', Jekyll::ExampleBlock)
+Liquid::Template.register_filter(Jekyll::HightlightFilter)
diff --git a/pages/components.html b/pages/components.html
new file mode 100644
index 000000000..3f3e83e4b
--- /dev/null
+++ b/pages/components.html
@@ -0,0 +1,11 @@
+---
+title: Table UI components
+---
+
+
diff --git a/scss/ui/_typo.scss b/scss/ui/_typo.scss
index eee986c86..1b6c346e6 100644
--- a/scss/ui/_typo.scss
+++ b/scss/ui/_typo.scss
@@ -83,10 +83,10 @@ pre {
hyphens: none;
line-height: 1.45;
color: $gray-800;
- text-shadow: 0 1px #fff;
tab-size: 3;
background-color: #f8fafc;
border-radius: $border-radius;
+ -webkit-font-smoothing: auto;
}
img {