Textile je značkovací jazyk, umožňující zapisovat HTML v textové formě, bez HTML značek.
| Objekt | Jak se zapisuje | Jak vypadá |
|---|---|---|
| Nadpis | h2. Nadpis | <%= textilize("h2. Nadpis") %> |
| Menší nadpis | h3. Nadpis | <%= textilize("h3. Menší nadpis") %> |
| Bloková citace | bq. <%= Lorem::Base.new('words', 19).output %> | <%= textilize("bq. #{Lorem::Base.new('words', 19).output}") %> |
| Kurzíva | Lorem _ipsum dolor_ sit amet. | <%= textilize("Lorem _ipsum dolor_ sit amet.") %> |
| Tučné | Lorem *ipsum dolor* sit amet. | <%= textilize("Lorem *ipsum dolor* sit amet.") %> |
| Řádková citace | Lorem ??ipsum dolor?? sit amet. | <%= textilize("Lorem ??ipsum dolor?? sit amet.") %> |
| Horní index | Lorem ^ipsum^ dolor sit amet. | <%= textilize("Lorem ^ipsum^ dolor sit amet.") %> |
| Dolní index | Lorem ~ipsum~ dolor sit amet. | <%= textilize("Lorem ~ipsum~ dolor sit amet.") %> |
| Položka číselného seznamu | # Lorem ipsum dolor sit amet. | <%= textilize("# Lorem ipsum dolor sit amet.") %> |
| Položka odrážkového seznamu | * Lorem ipsum dolor sit amet. | <%= textilize("* Lorem ipsum dolor sit amet.") %> |
| Odkaz | "Text odkazu":http://www.seznam.cz | <%= textilize("\"Text odkazu\":http://www.seznam.cz") %> |
| Odkaz v textu | Lorem "ipsum dolor":http://www.seznam.cz sit amet. | <%= textilize("Lorem \"ipsum dolor\":http://www.seznam.cz sit amet.") %> |
| Odkaz v textu s bublinkou | Lorem "ipsum dolor"(Text bublinky):http://www.seznam.cz sit amet. | <%= textilize("Lorem \"ipsum dolor(Text bublinky)\":http://www.seznam.cz sit amet.") %> |
| Obrázek s popiskem | !<%= "http://#{configatron.host}/images/mystic/box-heading-background.png" %>(Popisek obrázku)! | <%= textilize("!/images/mystic/box-heading-background.png(Popisek obrázku)!") %> |
| Obrázek s popiskem a odkazem | !<%= "http://#{configatron.host}/images/mystic/box-heading-background.png" %>(Popisek obrázku)!:http://www.seznam.cz | <%= textilize("!/images/mystic/box-heading-background.png(Popisek obrázku)!:http://www.seznam.cz") %> |
| Obrázek v textu s popiskem zarovnaný na střed | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. !(image-center)<%= "http://#{configatron.host}/images/mystic/box-heading-background.png" %>(Popisek obrázku)! Lorem ipsum dolor sit amet, consectetuer adipiscing elit. |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <%= textilize("!(image-center)/images/mystic/box-heading-background.png(Popisek obrázku)! Lorem ipsum dolor sit amet, consectetuer adipiscing elit. ") %> |
| Obrázek v textu s popiskem plovoucí vlevo | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. !(image-left)<%= "http://#{configatron.host}/images/mystic/box-heading-background.png" %>(Popisek obrázku)! Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <%= textilize("!(image-left)/images/mystic/box-heading-background.png(Popisek obrázku)! Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.") %> |
| Obrázek v textu s popiskem plovoucí vpravo | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. !(image-right)<%= "http://#{configatron.host}/images/mystic/box-heading-background.png" %>(Popisek obrázku)! Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <%= textilize("!(image-right)/images/mystic/box-heading-background.png(Popisek obrázku)! Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.") %> |
| Obrázek s lightboxem | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. fig. <%= "http://#{configatron.host}/images/mystic/box-heading-background.png" %> | <%= "http://#{configatron.host}/images/mystic/logo.png" %> | Popisek obrázku Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <%= textilize("fig. /images/mystic/box-heading-background.png | /images/mystic/logo.png | Popisek obrázku") %> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. |
| Ikonka | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. icon. <%= "http://#{configatron.host}/images/mystic/box-heading-background.png" %> | http://www.seznam.cz | Popisek ikonky Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <%= textilize("icon. /images/mystic/box-heading-background.png | http://www.seznam.cz | Popisek ikonky") %> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. |
| Ikonka se zalamovací čárou | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. icon. <%= "http://#{configatron.host}/images/mystic/box-heading-background.png" %> | http://www.seznam.cz | Popisek ikonky cleaner. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. |
Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. <%= textilize("icon. /images/mystic/box-heading-background.png | http://www.seznam.cz | Popisek ikonky ") %>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. |
| Google mapa | Formát: gmap. latitude | longitude | zoom | Popisek k mapě | Příklad: gmap. 50.045542 | 14.446846 | 10 | Adresa v Praze |
| Youtube video | Formát: youtube. kód | šířka | výška | Popisek videa | Příklad: youtube. QKPwuJyC-4E | 300 | 210| Stacie Monroe |
| Flash | Formát: flash. url | šířka | výška | Příklad: flash. http://www.seznam.cz/flash.swf | 300 | 210 |
| Zarovnání odstavce do bloku | p(justify). Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. | <%= textilize("p(justify). Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.") %> |
| Zarovnání odstavce napravo | p(right). Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. | <%= textilize("p(right). Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.") %> |
| Komplexní příklad | h2. Lorem ipsum Lorem ipsum dolor sit amet, *"consectetuer":http://www.seznam.cz* adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. * Lorem * Ipsum ** Lorem ipsum ** Dolor sit amet * dolor sit amet !(image-center)<%= "http://#{configatron.host}/images/mystic/box-heading-background.png" %>(Popisek obrázku)!:http://www.seznam.cz Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. |
<%= textilize("h2. Lorem ipsum Lorem ipsum dolor sit amet, *\"consectetuer\":http://www.seznam.cz* adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. * Lorem * Ipsum ** Lorem ipsum ** Dolor sit amet * dolor sit amet !(image-center)/images/mystic/box-heading-background.png(Popisek obrázku)!:http://www.seznam.cz Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.") %> |
Podrobnější informace naleznete například na oficiálních stránkách <%= link_to "Textile", "http://www.textism.com/tools/textile/" %>.
<% content_for :javascript do %> <%= javascript_include_tag "jquery.colorbox-min" %> <% end %>