lektor-website/plugins/lektor-markdown-ruby-blocks/index.html

309 lines
16 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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">
<link rel="stylesheet" href="../../static/styles.css?h=dff0aaad">
<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 &ndash; lektor-markdown-ruby-blocks 0.2.4</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.4</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">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;ruby-line&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">ruby</span><span class="p">&gt;</span><span class="p">&lt;</span><span class="nt">rp</span><span class="p">&gt;</span>(<span class="p">&lt;/</span><span class="nt">rp</span><span class="p">&gt;&lt;</span><span class="nt">rt</span><span class="p">&gt;</span>ある<span class="p">&lt;/</span><span class="nt">rt</span><span class="p">&gt;&lt;</span><span class="nt">rp</span><span class="p">&gt;</span>)<span class="p">&lt;/</span><span class="nt">rp</span><span class="p">&gt;&lt;/</span><span class="nt">ruby</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span>
</pre>
<p>The rendering result:</p>
<p>
<span class="ruby-line">
&lt;ruby&gt;&lt;rp&gt;(&lt;/rp&gt;&lt;rt&gt;ある&lt;/rt&gt;&lt;rp&gt;)&lt;/rp&gt;&lt;/ruby&gt;
</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">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;ruby-line&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">ruby</span><span class="p">&gt;</span><span class="p">&lt;</span><span class="nt">rp</span><span class="p">&gt;</span>(<span class="p">&lt;/</span><span class="nt">rp</span><span class="p">&gt;&lt;</span><span class="nt">rt</span><span class="p">&gt;</span><span class="p">&lt;/</span><span class="nt">rt</span><span class="p">&gt;&lt;</span><span class="nt">rp</span><span class="p">&gt;</span>)<span class="p">&lt;/</span><span class="nt">rp</span><span class="p">&gt;&lt;/</span><span class="nt">ruby</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">ruby</span><span class="p">&gt;</span><span class="p">&lt;</span><span class="nt">rp</span><span class="p">&gt;</span>(<span class="p">&lt;/</span><span class="nt">rp</span><span class="p">&gt;&lt;</span><span class="nt">rt</span><span class="p">&gt;</span>ぶん<span class="p">&lt;/</span><span class="nt">rt</span><span class="p">&gt;&lt;</span><span class="nt">rp</span><span class="p">&gt;</span>)<span class="p">&lt;/</span><span class="nt">rp</span><span class="p">&gt;&lt;/</span><span class="nt">ruby</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span>
</pre>
<p>Rendered output:</p>
<span class="ruby-line">
&lt;ruby&gt;&lt;rp&gt;(&lt;/rp&gt;&lt;rt&gt;&lt;/rt&gt;&lt;rp&gt;)&lt;/rp&gt;&lt;/ruby&gt;
&lt;ruby&gt;&lt;rp&gt;(&lt;/rp&gt;&lt;rt&gt;ぶん&lt;/rt&gt;&lt;rp&gt;)&lt;/rp&gt;&lt;/ruby&gt;
</span>
<h3>Newline</h3>
<p>This plugin will automatically add <code>&lt;br /&gt;</code> between each line in a ruby-block:</p>
<pre lang="markdown">^^
(歩)[ある]く
(歩)[ある]く
^^
</pre>
<p>This will output:</p>
<pre lang="html"><span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;ruby-line&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">ruby</span><span class="p">&gt;</span><span class="p">&lt;</span><span class="nt">rp</span><span class="p">&gt;</span>(<span class="p">&lt;/</span><span class="nt">rp</span><span class="p">&gt;&lt;</span><span class="nt">rt</span><span class="p">&gt;</span>ある<span class="p">&lt;/</span><span class="nt">rt</span><span class="p">&gt;&lt;</span><span class="nt">rp</span><span class="p">&gt;</span>)<span class="p">&lt;/</span><span class="nt">rp</span><span class="p">&gt;&lt;/</span><span class="nt">ruby</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">br</span> <span class="p">/&gt;</span>
<span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;ruby-line&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">ruby</span><span class="p">&gt;</span><span class="p">&lt;</span><span class="nt">rp</span><span class="p">&gt;</span>(<span class="p">&lt;/</span><span class="nt">rp</span><span class="p">&gt;&lt;</span><span class="nt">rt</span><span class="p">&gt;</span>ある<span class="p">&lt;/</span><span class="nt">rt</span><span class="p">&gt;&lt;</span><span class="nt">rp</span><span class="p">&gt;</span>)<span class="p">&lt;/</span><span class="nt">rp</span><span class="p">&gt;&lt;/</span><span class="nt">ruby</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</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">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;ruby-line&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">ruby</span><span class="p">&gt;</span><span class="p">&lt;</span><span class="nt">rp</span><span class="p">&gt;</span>(<span class="p">&lt;/</span><span class="nt">rp</span><span class="p">&gt;&lt;</span><span class="nt">rt</span><span class="p">&gt;</span>ある<span class="p">&lt;/</span><span class="nt">rt</span><span class="p">&gt;&lt;</span><span class="nt">rp</span><span class="p">&gt;</span>)<span class="p">&lt;/</span><span class="nt">rp</span><span class="p">&gt;&lt;/</span><span class="nt">ruby</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">br</span> <span class="p">/&gt;</span>
<span class="p">&lt;</span><span class="nt">br</span> <span class="p">/&gt;</span>
<span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;ruby-line&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">ruby</span><span class="p">&gt;</span><span class="p">&lt;</span><span class="nt">rp</span><span class="p">&gt;</span>(<span class="p">&lt;/</span><span class="nt">rp</span><span class="p">&gt;&lt;</span><span class="nt">rt</span><span class="p">&gt;</span>ある<span class="p">&lt;/</span><span class="nt">rt</span><span class="p">&gt;&lt;</span><span class="nt">rp</span><span class="p">&gt;</span>)<span class="p">&lt;/</span><span class="nt">rp</span><span class="p">&gt;&lt;/</span><span class="nt">ruby</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</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">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;ruby-line&quot;</span> <span class="na">style</span><span class="o">=</span><span class="s">&quot;color: #44cc00&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">ruby</span><span class="p">&gt;</span><span class="p">&lt;</span><span class="nt">rp</span><span class="p">&gt;</span>(<span class="p">&lt;/</span><span class="nt">rp</span><span class="p">&gt;&lt;</span><span class="nt">rt</span><span class="p">&gt;</span>ある<span class="p">&lt;/</span><span class="nt">rt</span><span class="p">&gt;&lt;</span><span class="nt">rp</span><span class="p">&gt;</span>)<span class="p">&lt;/</span><span class="nt">rp</span><span class="p">&gt;&lt;/</span><span class="nt">ruby</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span>
</pre>
<h3>Raw lines</h3>
<p>Prepend <code>% </code>  to create a raw line. Raw lines are not converted to ruby tags,
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">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;ruby-line&quot;</span> <span class="na">style</span><span class="o">=</span><span class="s">&quot;color: #44cc00&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">ruby</span><span class="p">&gt;</span><span class="p">&lt;</span><span class="nt">rp</span><span class="p">&gt;</span>(<span class="p">&lt;/</span><span class="nt">rp</span><span class="p">&gt;&lt;</span><span class="nt">rt</span><span class="p">&gt;</span>ある<span class="p">&lt;/</span><span class="nt">rt</span><span class="p">&gt;&lt;</span><span class="nt">rp</span><span class="p">&gt;</span>)<span class="p">&lt;/</span><span class="nt">rp</span><span class="p">&gt;&lt;/</span><span class="nt">ruby</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">br</span> <span class="p">/&gt;</span>
<span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;non-ruby-line&quot;</span><span class="p">&gt;</span>
(aru)[ku]
<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</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>
<script type=text/javascript src="../../static/app.js?h=8b801996" charset="utf-8"></script>
<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>