2022-09-13 17:02:13 +02:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< meta http-equiv = "X-UA-Compatible" content = "ie=edge" >
2022-12-17 10:12:40 +01:00
< link rel = "stylesheet" href = "../../static/styles.css?h=dff0aaad" >
2022-09-13 17:02:13 +02:00
< link rel = "stylesheet" href = "../../static/pygments.css" >
< link rel = "shortcut icon" href = "../../static/favicon.png?h=fa09bedd" >
< title > | Lektor Static Content Management System< / title >
< / head >
< body class = "default" >
< nav class = "navbar navbar-inverse navbar-static-top" >
< div class = "container" >
< div class = "navbar-header" >
< button type = "button" class = "navbar-toggle collapsed"
data-toggle="collapse" data-target="#navbar"
aria-expanded="false" aria-controls="navbar">
< span class = "sr-only" > Toggle navigation< / span >
< span class = "icon-bar" > < / span >
< span class = "icon-bar" > < / span >
< span class = "icon-bar" > < / span >
< / button >
< a class = "navbar-brand" href = "../../" > Lektor< / a >
< / div >
< div id = "navbar" class = "collapse navbar-collapse" >
< ul class = "nav navbar-nav" >
< li > < a href = "../../downloads/" > Download< / a > < / li >
< li > < a href = "../../docs/" > Documentation< / a > < / li >
< li > < a href = "../../showcase/" > Showcase< / a > < / li >
< li class = "active" > < a href = "../" > Plugins< / a > < / li >
< li > < a href = "../../community/" > Community< / a > < / li >
< li > < a href = "../../blog/" > Blog< / a > < / li >
< / ul >
< / div >
< / div >
< / nav >
< div class = "body-wrapper" >
< div class = "page-banner page-banner-300" style = "background-image: url(../header.jpg)" > < / div >
< div class = "container" >
<!-- Place this tag in your head or just before your close body tag. -->
< div class = "plugin" >
< div class = "row" >
< div class = "col-sm-12" >
< h1 > Plugin – lektor-markdown-ruby-blocks 0.2.3< / h1 >
< / div >
< / div >
< div class = "row" >
< div class = "col-sm-1" > < / div >
< div class = "col-sm-11" >
< p > Add supports to ruby blocks syntax in Markdown.< p >
< / div >
< / div >
< div class = "row" >
< div class = "col-sm-3 plugin-margin" >
< h4 > Project links< / h4 >
< ul class = "tree-nav" >
< li > < a href = "https://pypi.org/project/lektor-markdown-ruby-blocks/" class = "ext" > Homepage< / a > < / li >
< / ul >
< div class = "separator" >
< h4 > Meta< / h4 >
< / div >
< p > < strong > Version:< / strong > 0.2.3< / p >
< p > < strong > Author:< / strong >
< a href = "mailto:25349023.qq@gmail.com" > 25349023< / a >
< / p >
< div class = "separator" >
< h4 > Tags< / h4 >
< / div >
< a href = "../tag/HTML/" > HTML< / a > ,
< a href = "../tag/Markdown/" > Markdown< / a > ,
and
< a href = "../tag/markdown-config/" > markdown-config< / a >
< p >
View < a href = "../tags/" class = "ref" > all tags< / a > .
< / p >
< / div >
< div class = "col-sm-9 doc-styling" >
< h2 > Project Description< / h2 >
< h1 > lektor-markdown-ruby-blocks< / h1 >
< p > This is a simple Lektor plugin that adds support for
HTML ruby tags to Markdown.< / p >
< h2 > Syntax< / h2 >
< p > To create a ruby tag, use the following < strong > ruby-block< / strong > syntax:< / p >
< pre lang = "markdown" > ^^
(歩)[ある]く
^^
< / pre >
< p > This will generate the following HTML:< / p >
< pre lang = "html" > < span class = "p" > < < / span > < span class = "nt" > span< / span > < span class = "na" > class< / span > < span class = "o" > =< / span > < span class = "s" > " ruby-line" < / span > < span class = "p" > > < / span >
< span class = "p" > < < / span > < span class = "nt" > ruby< / span > < span class = "p" > > < / span > 歩< span class = "p" > < < / span > < span class = "nt" > rp< / span > < span class = "p" > > < / span > (< span class = "p" > < /< / span > < span class = "nt" > rp< / span > < span class = "p" > > < < / span > < span class = "nt" > rt< / span > < span class = "p" > > < / span > ある< span class = "p" > < /< / span > < span class = "nt" > rt< / span > < span class = "p" > > < < / span > < span class = "nt" > rp< / span > < span class = "p" > > < / span > )< span class = "p" > < /< / span > < span class = "nt" > rp< / span > < span class = "p" > > < /< / span > < span class = "nt" > ruby< / span > < span class = "p" > > < / span > く
< span class = "p" > < /< / span > < span class = "nt" > span< / span > < span class = "p" > > < / span >
< / pre >
< p > The rendering result:< / p >
< p >
< span class = "ruby-line" >
< ruby> 歩< rp> (< /rp> < rt> ある< /rt> < rp> )< /rp> < /ruby> く
< / span >
< / p >
< p > You can combine adjacent ruby text like this:< / p >
< pre lang = "markdown" > ^^
(自|分)[じ|ぶん]
^^
< / pre >
< p > And this will be rendered like this:< / p >
< pre lang = "html" > < span class = "p" > < < / span > < span class = "nt" > span< / span > < span class = "na" > class< / span > < span class = "o" > =< / span > < span class = "s" > " ruby-line" < / span > < span class = "p" > > < / span >
< span class = "p" > < < / span > < span class = "nt" > ruby< / span > < span class = "p" > > < / span > 自< span class = "p" > < < / span > < span class = "nt" > rp< / span > < span class = "p" > > < / span > (< span class = "p" > < /< / span > < span class = "nt" > rp< / span > < span class = "p" > > < < / span > < span class = "nt" > rt< / span > < span class = "p" > > < / span > じ< span class = "p" > < /< / span > < span class = "nt" > rt< / span > < span class = "p" > > < < / span > < span class = "nt" > rp< / span > < span class = "p" > > < / span > )< span class = "p" > < /< / span > < span class = "nt" > rp< / span > < span class = "p" > > < /< / span > < span class = "nt" > ruby< / span > < span class = "p" > > < / span >
< span class = "p" > < < / span > < span class = "nt" > ruby< / span > < span class = "p" > > < / span > 分< span class = "p" > < < / span > < span class = "nt" > rp< / span > < span class = "p" > > < / span > (< span class = "p" > < /< / span > < span class = "nt" > rp< / span > < span class = "p" > > < < / span > < span class = "nt" > rt< / span > < span class = "p" > > < / span > ぶん< span class = "p" > < /< / span > < span class = "nt" > rt< / span > < span class = "p" > > < < / span > < span class = "nt" > rp< / span > < span class = "p" > > < / span > )< span class = "p" > < /< / span > < span class = "nt" > rp< / span > < span class = "p" > > < /< / span > < span class = "nt" > ruby< / span > < span class = "p" > > < / span >
< span class = "p" > < /< / span > < span class = "nt" > span< / span > < span class = "p" > > < / span >
< / pre >
< p > Rendered output:< / p >
< span class = "ruby-line" >
< ruby> 自< rp> (< /rp> < rt> じ< /rt> < rp> )< /rp> < /ruby>
< ruby> 分< rp> (< /rp> < rt> ぶん< /rt> < rp> )< /rp> < /ruby>
< / span >
< h3 > Newline< / h3 >
< p > This plugin will automatically add < code > < br /> < / code > between each line in a ruby-block:< / p >
< pre lang = "markdown" > ^^
(歩)[ある]く
(歩)[ある]く
^^
< / pre >
< p > This will output:< / p >
< pre lang = "html" > < span class = "p" > < < / span > < span class = "nt" > span< / span > < span class = "na" > class< / span > < span class = "o" > =< / span > < span class = "s" > " ruby-line" < / span > < span class = "p" > > < / span >
< span class = "p" > < < / span > < span class = "nt" > ruby< / span > < span class = "p" > > < / span > 歩< span class = "p" > < < / span > < span class = "nt" > rp< / span > < span class = "p" > > < / span > (< span class = "p" > < /< / span > < span class = "nt" > rp< / span > < span class = "p" > > < < / span > < span class = "nt" > rt< / span > < span class = "p" > > < / span > ある< span class = "p" > < /< / span > < span class = "nt" > rt< / span > < span class = "p" > > < < / span > < span class = "nt" > rp< / span > < span class = "p" > > < / span > )< span class = "p" > < /< / span > < span class = "nt" > rp< / span > < span class = "p" > > < /< / span > < span class = "nt" > ruby< / span > < span class = "p" > > < / span > く
< span class = "p" > < /< / span > < span class = "nt" > span< / span > < span class = "p" > > < / span >
< span class = "p" > < < / span > < span class = "nt" > br< / span > < span class = "p" > /> < / span >
< span class = "p" > < < / span > < span class = "nt" > span< / span > < span class = "na" > class< / span > < span class = "o" > =< / span > < span class = "s" > " ruby-line" < / span > < span class = "p" > > < / span >
< span class = "p" > < < / span > < span class = "nt" > ruby< / span > < span class = "p" > > < / span > 歩< span class = "p" > < < / span > < span class = "nt" > rp< / span > < span class = "p" > > < / span > (< span class = "p" > < /< / span > < span class = "nt" > rp< / span > < span class = "p" > > < < / span > < span class = "nt" > rt< / span > < span class = "p" > > < / span > ある< span class = "p" > < /< / span > < span class = "nt" > rt< / span > < span class = "p" > > < < / span > < span class = "nt" > rp< / span > < span class = "p" > > < / span > )< span class = "p" > < /< / span > < span class = "nt" > rp< / span > < span class = "p" > > < /< / span > < span class = "nt" > ruby< / span > < span class = "p" > > < / span > く
< span class = "p" > < /< / span > < span class = "nt" > span< / span > < span class = "p" > > < / span >
< / pre >
< p > You can also use < code > -##-< / code > to create an extra newline in a ruby-block.< / p >
< pre lang = "markdown" > ^^
(歩)[ある]く
-##-
(歩)[ある]く
^^
< / pre >
< p > Output:< / p >
< pre lang = "html" > < span class = "p" > < < / span > < span class = "nt" > span< / span > < span class = "na" > class< / span > < span class = "o" > =< / span > < span class = "s" > " ruby-line" < / span > < span class = "p" > > < / span >
< span class = "p" > < < / span > < span class = "nt" > ruby< / span > < span class = "p" > > < / span > 歩< span class = "p" > < < / span > < span class = "nt" > rp< / span > < span class = "p" > > < / span > (< span class = "p" > < /< / span > < span class = "nt" > rp< / span > < span class = "p" > > < < / span > < span class = "nt" > rt< / span > < span class = "p" > > < / span > ある< span class = "p" > < /< / span > < span class = "nt" > rt< / span > < span class = "p" > > < < / span > < span class = "nt" > rp< / span > < span class = "p" > > < / span > )< span class = "p" > < /< / span > < span class = "nt" > rp< / span > < span class = "p" > > < /< / span > < span class = "nt" > ruby< / span > < span class = "p" > > < / span > く
< span class = "p" > < /< / span > < span class = "nt" > span< / span > < span class = "p" > > < / span >
< span class = "p" > < < / span > < span class = "nt" > br< / span > < span class = "p" > /> < / span >
< span class = "p" > < < / span > < span class = "nt" > br< / span > < span class = "p" > /> < / span >
< span class = "p" > < < / span > < span class = "nt" > span< / span > < span class = "na" > class< / span > < span class = "o" > =< / span > < span class = "s" > " ruby-line" < / span > < span class = "p" > > < / span >
< span class = "p" > < < / span > < span class = "nt" > ruby< / span > < span class = "p" > > < / span > 歩< span class = "p" > < < / span > < span class = "nt" > rp< / span > < span class = "p" > > < / span > (< span class = "p" > < /< / span > < span class = "nt" > rp< / span > < span class = "p" > > < < / span > < span class = "nt" > rt< / span > < span class = "p" > > < / span > ある< span class = "p" > < /< / span > < span class = "nt" > rt< / span > < span class = "p" > > < < / span > < span class = "nt" > rp< / span > < span class = "p" > > < / span > )< span class = "p" > < /< / span > < span class = "nt" > rp< / span > < span class = "p" > > < /< / span > < span class = "nt" > ruby< / span > < span class = "p" > > < / span > く
< span class = "p" > < /< / span > < span class = "nt" > span< / span > < span class = "p" > > < / span >
< / pre >
< h3 > Coloring the text< / h3 >
< p > Additionally, you can add a 6-digit or 8-digit hex RGB code
after the beginning < code > ^^< / code > , making the rendered content colored
with specified color.< / p >
< pre lang = "markdown" > ^^#44cc00
(歩)[ある]く
^^
< / pre >
< p > This will generate the following HTML pieces:< / p >
< pre lang = "html" > < span class = "p" > < < / span > < span class = "nt" > span< / span > < span class = "na" > class< / span > < span class = "o" > =< / span > < span class = "s" > " ruby-line" < / span > < span class = "na" > style< / span > < span class = "o" > =< / span > < span class = "s" > " color: #44cc00" < / span > < span class = "p" > > < / span >
< span class = "p" > < < / span > < span class = "nt" > ruby< / span > < span class = "p" > > < / span > 歩< span class = "p" > < < / span > < span class = "nt" > rp< / span > < span class = "p" > > < / span > (< span class = "p" > < /< / span > < span class = "nt" > rp< / span > < span class = "p" > > < < / span > < span class = "nt" > rt< / span > < span class = "p" > > < / span > ある< span class = "p" > < /< / span > < span class = "nt" > rt< / span > < span class = "p" > > < < / span > < span class = "nt" > rp< / span > < span class = "p" > > < / span > )< span class = "p" > < /< / span > < span class = "nt" > rp< / span > < span class = "p" > > < /< / span > < span class = "nt" > ruby< / span > < span class = "p" > > < / span > く
< span class = "p" > < /< / span > < span class = "nt" > span< / span > < span class = "p" > > < / span >
< / pre >
< h3 > Raw lines< / h3 >
< p > Prepend < code > % < / code >
not affected by the color settings, and have a different class.< / p >
< p > Example:< / p >
< pre lang = "markdown" > ^^#44cc00
(歩)[ある]く
% (aru)[ku]
^^
< / pre >
< p > Output:< / p >
< pre lang = "html" > < span class = "p" > < < / span > < span class = "nt" > span< / span > < span class = "na" > class< / span > < span class = "o" > =< / span > < span class = "s" > " ruby-line" < / span > < span class = "na" > style< / span > < span class = "o" > =< / span > < span class = "s" > " color: #44cc00" < / span > < span class = "p" > > < / span >
< span class = "p" > < < / span > < span class = "nt" > ruby< / span > < span class = "p" > > < / span > 歩< span class = "p" > < < / span > < span class = "nt" > rp< / span > < span class = "p" > > < / span > (< span class = "p" > < /< / span > < span class = "nt" > rp< / span > < span class = "p" > > < < / span > < span class = "nt" > rt< / span > < span class = "p" > > < / span > ある< span class = "p" > < /< / span > < span class = "nt" > rt< / span > < span class = "p" > > < < / span > < span class = "nt" > rp< / span > < span class = "p" > > < / span > )< span class = "p" > < /< / span > < span class = "nt" > rp< / span > < span class = "p" > > < /< / span > < span class = "nt" > ruby< / span > < span class = "p" > > < / span > く
< span class = "p" > < /< / span > < span class = "nt" > span< / span > < span class = "p" > > < / span >
< span class = "p" > < < / span > < span class = "nt" > br< / span > < span class = "p" > /> < / span >
< span class = "p" > < < / span > < span class = "nt" > span< / span > < span class = "na" > class< / span > < span class = "o" > =< / span > < span class = "s" > " non-ruby-line" < / span > < span class = "p" > > < / span >
(aru)[ku]
< span class = "p" > < /< / span > < span class = "nt" > span< / span > < span class = "p" > > < / span >
< / pre >
< div class = "comment-box" >
< h2 > Comments< / h2 >
< div id = "disqus_thread" > < / div >
< script >
var disqus_config = function() { this.page.identifier = "/plugins/lektor-markdown-ruby-blocks"; this.page.url = "https://www.getlektor.com/plugins/lektor-markdown-ruby-blocks/"; };
(function() {
var d = document, s = d.createElement('script');
s.src = '//lektordocumentation.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
< / script >
< noscript >
Please enable JavaScript to view the < a href = "https://disqus.com/?ref_noscript"
rel="nofollow">comments powered by Disqus.< / a >
< / noscript >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< div class = "bottomsummary" >
< div class = "container" >
< / div >
< / div >
< footer >
< div class = "container" >
< div class = "row" >
< div class = "col-sm-4 icon-bar" >
< a href = "https://github.com/lektor/lektor/" title = "Lektor on GitHub"
>< i class = "fa fa-github" > < / i > < / a >
< a href = "https://github.com/lektor/lektor/issues/" title = "Report Issues for Lektor"
>< i class = "fa fa-bug" > < / i > < / a >
< a href = "https://twitter.com/getlektor" title = "Find Lektor on Twitter"
>< i class = "fa fa-twitter" > < / i > < / a >
< a href = "https://gitter.im/lektor/lektor" title = "Chat on Gitter"
>< i class = "fa fa-comment" > < / i > < / a >
< a href = "https://github.com/lektor/lektor-website/tree/master/content/plugins/lektor-markdown-ruby-blocks/contents.lr" title = "View source for this page" > < i class = "fa fa-code" > < / i > < / a >
< / div >
< div class = "col-sm-8" >
< a href = "../../license/" > License & Copyright< / a > •
< a href = "../../contact/" > Contact< / a > •
Made with < i class = "fa fa-fw fa-heart" title = "Heart" > < span hidden > Heart< / span > < / i > in Carinthia
< / div >
< / div >
< / div >
< / footer >
2022-12-17 10:12:40 +01:00
< script type = text/javascript src = "../../static/app.js?h=ee15141e" charset = "utf-8" > < / script >
2022-09-13 17:02:13 +02:00
< script >
((window.gitter = {}).chat = {}).options = {
room: 'lektor/lektor',
activationElement: null
};
document.write('< button class = "js-gitter-toggle-chat-button" > Toggle Chat< / button > ');
var dnt = navigator.doNotTrack || window.doNotTrack || navigator.msDoNotTrack;
if (dnt != "1" & & dnt != "yes") {
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-70822533-1', 'auto');
ga('set', 'anonymizeIp', true);
ga('send', 'pageview');
} else {
console.debug("Respecting Do-Not-Track, not running analytics.");
}
< / script >
< script async src = 'https://www.google-analytics.com/analytics.js' > < / script >
< script async defer id = "github-bjs" src = "https://buttons.github.io/buttons.js" > < / script >
< script > ! function ( d , s , id ) { var js , fjs = d . getElementsByTagName ( s ) [ 0 ] , p = /^http:/ . test ( d . location ) ? 'http' : 'https' ; if ( ! d . getElementById ( id ) ) { js = d . createElement ( s ) ; js . id = id ; js . src = p + '://platform.twitter.com/widgets.js' ; fjs . parentNode . insertBefore ( js , fjs ) ; } } ( document , 'script' , 'twitter-wjs' ) ; < / script >
< script src = "https://sidecar.gitter.im/dist/sidecar.v1.js" async defer > < / script >
< / body >
< / html >
