mirror of https://github.com/joplin/website.git
351 lines
16 KiB
HTML
351 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<!-- Common page configuration that goes in the <head></head> tag -->
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,viewport-fit=cover"/>
|
|
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src * data: ; style-src 'self' 'unsafe-inline' ; child-src 'none' ; connect-src 'self' raw.githubusercontent.com ;"/>
|
|
<link rel="icon" type="image/x-icon" href="/plugins/favicon.png" />
|
|
<link rel="stylesheet" href="/plugins/fontawesome-6.4.2/css/all.min.css" type="text/css"/>
|
|
|
|
<!-- Allow included JavaScipt files to determine the root directory of this site. -->
|
|
<script id="site-root" type="text/plain">/plugins</script>
|
|
|
|
<!-- Scripts used by all pages -->
|
|
<script src="/plugins/bundle-main.js"></script>
|
|
<script src="/plugins/bundle-components.js"></script>
|
|
<title>Joplin Plugins - Rich Markdown</title>
|
|
|
|
<meta property="og:title" content="Joplin Plugin: Rich Markdown"/>
|
|
<meta property="og:description" content="Helping you ditch the markdown viewer for good."/>
|
|
<meta property="og:image" content="https://raw.githubusercontent.com/CalebJohn/joplin-rich-markdown/HEAD/icons/128.png"/>
|
|
|
|
<script src="/plugins/bundle-pluginPage.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<nav class="navbar navbar-expand-lg bg-body-tertiary sticky-top">
|
|
<div class="container">
|
|
<a class="navbar-brand" href="https://joplinapp.org/">
|
|
<img src="/plugins/joplin-logo.png" alt="Home"/>
|
|
</a>
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
|
<ul class="navbar-nav ms-auto me-2 mb-2 mb-lg-0">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" aria-current="page" href="/plugins">Plugins</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="https://joplinapp.org/news/">News</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="https://joplinapp.org/help/">Help</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="https://discourse.joplinapp.org/">Forum</a>
|
|
</li>
|
|
</ul>
|
|
<div class="search-field col-12 col-lg-3 mb-3 mb-lg-0 me-lg-3">
|
|
<i class="fa-solid fa-magnifying-glass search-icon" alt=""></i>
|
|
<input
|
|
type="search"
|
|
class="form-control search-input"
|
|
placeholder="Search..."
|
|
id="search-input"/>
|
|
<div class="search-results" id="search-results-container" aria-live="polite"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<main class="plugin-details">
|
|
<nav aria-label="breadcrumb" class="container breadcrumb-container">
|
|
<ol class="breadcrumb">
|
|
<li class="breadcrumb-item">
|
|
<a href="/plugins"><i class="fas fa-home"></i> Home</a>
|
|
</li>
|
|
<li class="breadcrumb-item"><a id="current-category-nav-link" href="/plugins/">All</a></li>
|
|
<li class="breadcrumb-item active" aria-current="page">Rich Markdown</li>
|
|
</ol>
|
|
</nav>
|
|
<div class="plugin-overview">
|
|
<div class="spacer">
|
|
</div>
|
|
<div class="plugin-page-header">
|
|
<div class="title plugin-page-title">
|
|
<img
|
|
class="icon plugin-icon -dark-mode-shadow"
|
|
src="https://raw.githubusercontent.com/CalebJohn/joplin-rich-markdown/HEAD/icons/128.png"
|
|
alt="Plugin icon"
|
|
/>
|
|
<div>
|
|
<h1 class="card-title">Rich Markdown</h1>
|
|
<div class="card-title pb-2">
|
|
by
|
|
<a
|
|
href="./?search=author%3D%22Caleb John%22%20max-results%3D20"
|
|
style="display: inline;"
|
|
>
|
|
Caleb John
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="categories">
|
|
<a href="/plugins/#recommended-section">
|
|
<span class="plugin-recommended me-2 badge"><i class="fas fa-crown"></i> Recommended</span>
|
|
</a>
|
|
<a class="plugin-category me-2 badge" href="/plugins/#tab-appearance">
|
|
<i class="fas fa-tag"></i> appearance
|
|
</a>
|
|
<a class="plugin-category me-2 badge" href="/plugins/#tab-editor">
|
|
<i class="fas fa-tag"></i> editor
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="download-link-container">
|
|
<a
|
|
href="/plugins/downloadPlugin.html?plugin=plugin.calebjohn.rich-markdown"
|
|
class="btn btn-primary process--append-parent-tab-to-href"
|
|
>
|
|
Install Plugin
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="plugin-content">
|
|
<div class="secondary-section">
|
|
<div class="content" id="screenshots-container">
|
|
<div id="raw-screenshots">
|
|
<img src="https://raw.githubusercontent.com/CalebJohn/joplin-rich-markdown/HEAD/examples/welcome.png" alt="A demonstration of what a note can look like using this plugin."/>
|
|
</div>
|
|
|
|
<!-- See https://getbootstrap.com/docs/5.3/components/carousel/ -->
|
|
<div id="screenshots-carousel" class="carousel slide">
|
|
<button
|
|
class="carousel-control-prev"
|
|
type="button"
|
|
data-bs-target="#screenshots-carousel"
|
|
data-bs-slide="prev"
|
|
>
|
|
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
|
<span class="visually-hidden">Previous</span>
|
|
</button>
|
|
<button
|
|
class="carousel-control-next"
|
|
type="button"
|
|
data-bs-target="#screenshots-carousel"
|
|
data-bs-slide="next"
|
|
>
|
|
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
|
<span class="visually-hidden">Next</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="container section">
|
|
<h3>Description</h3>
|
|
<p class="card-text pb-4">Helping you ditch the markdown viewer for good.</p>
|
|
</div>
|
|
<div class="container section">
|
|
<h3>Additional Information</h3>
|
|
<table class="additional-information-table">
|
|
<tbody>
|
|
<tr>
|
|
<th>Links:</th>
|
|
<td>
|
|
<ul class="list-group list-group-flush text-break">
|
|
<li><a href=https://github.com/CalebJohn/joplin-rich-markdown style="display: block;"><i class="fa-solid fa-link"></i> Repository</a></li>
|
|
<li><a href=https://github.com/CalebJohn/joplin-rich-markdown#readme style="display: block;"><i class="fa-solid fa-link"></i> Homepage</a></li>
|
|
<li>
|
|
<a
|
|
id="view-plugin-source-link"
|
|
href="/plugins/view-source.html?plugin=plugin.calebjohn.rich-markdown"
|
|
class="process--append-parent-tab-to-href"
|
|
>
|
|
<i class="fa-solid fa-code"></i> View source
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Maintainers:</th>
|
|
<td>
|
|
<a href="./?search=maintainer%3D%22calebjohn%22%20max-results%3D20" class="maintainer-link">
|
|
calebjohn
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
<tr><th>Version:</th><td>0.15.1</td></tr>
|
|
<tr><th>Minimum app version:</th><td>2.7</td></tr>
|
|
<tr><th>Downloads: This version:</th><td>57</td></tr>
|
|
<tr><th>Last updated:</th><td class="process--format-as-local-time">2024-11-02T20:40:20Z</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="container section" id="readme" data--is-rendered-markdown>
|
|
|
|
<h1>Rich Markdown</h1>
|
|
<p>A plugin that will finally allow you to ditch the markdown viewer, saving space and making your life easier.</p>
|
|
<p>Rich Markdown comes as a collection of multiple features that can be toggled in settings. The main goal is to add better interaction features to the editor, namely <a href="#images-on-hover">image</a> <a href="#images-in-editor">viewing</a>, <a href="#checkbox">checkbox interaction</a>, and <a href="#links">links</a>. It also adds a number of CSS classes that make it possible to add extra customization to the markdown editor. Checkout the image below to see how far this can go!</p>
|
|
<p><img src="https://raw.githubusercontent.com/CalebJohn/joplin-rich-markdown/main/examples/welcome.png" alt="Welcome Notebook Screenshot" /></p>
|
|
<p>The above theme can be applied in the plugin settings menu (this one is called "Stylish"). Thanks to <a href="https://discourse.joplinapp.org/t/plugin-rich-markdown/15053/105">@uxamanda</a> for the awesome theme!</p>
|
|
<h1>Features</h1>
|
|
<p>The Rich Markdown plugin supports a number of optional features. Unless otherwise stated, these features can be toggled under <code>Tools -> Options -> Rich Markdown -> Add additional CSS classes for enhanced customization</code>.</p>
|
|
<h2>Images on Hover</h2>
|
|
<p>When hovering over a markdown image tag with Ctrl (or Opt) pressed, a preview of the image will pop up below the mouse cursor.</p>
|
|
<p>This is enabled by default.
|
|
<a href="https://github.com/CalebJohn/joplin-rich-markdown/blob/main/examples/hover_image.png">Example of an image on hover</a></p>
|
|
<h2>Images in Editor</h2>
|
|
<p>Any image that is contained on it's own line of the markdown source will render directly on the line directly below. This works for both internal resources and generic links to images</p>
|
|
<p>This is not enabled by default, but can be quick toggled in the View menu.
|
|
<a href="https://github.com/CalebJohn/joplin-rich-markdown/blob/main/examples/inline_image.png">Example of images being rendered in markdown editor</a></p>
|
|
<h2>Checkbox</h2>
|
|
<p>Checkboxes can be toggled in the markdown source by Ctrl (or Opt) + Clicking or with the Perform action command in the context menu.</p>
|
|
<p>This is enabled by default.</p>
|
|
<h2>Links</h2>
|
|
<p>Links can be followed by Ctrl (or Opt) + Clicking or with the Perform action command in the context menu.</p>
|
|
<p>This is enabled by default.</p>
|
|
<h2>Highlighting</h2>
|
|
<p>Text surrounded by == (e.g. ==mark==) will now be highlighted in the editor.</p>
|
|
<p>Insert syntax (++insert++), sub (~sub~), and sup (^sup^) syntaxes are also available and enabled in the same way.</p>
|
|
<p>This can be enabled under <code>Tools -> Options -> Markdown -> Enable ==mark== syntax</code>.</p>
|
|
<h2>Align Lists</h2>
|
|
<p>Lists that get wrapped will have the wrap match the indentation of the list element.
|
|
This includes checkboxes and block quotes.</p>
|
|
<p>This is enabled by default.</p>
|
|
<h2>Extra CSS</h2>
|
|
<p>Some additional CSS classes have been added to further enable customization through <a href="https://joplinapp.org/help/#custom-css">userchrome.css</a>. Available classes are detailed below.</p>
|
|
<p><code>.cm-header.cm-rm-header-token</code>: The grouping of hashtags (#) at the start of a header</p>
|
|
<p><code>.cm-em.cm-rm-em-token</code>: The * or _ used to begin italics</p>
|
|
<p><code>.cm-strong.cm-rm-strong-token</code>: The ** or __ used to begin bold</p>
|
|
<p><code>.cm-rm-highlight</code>: The highlighted text (including the ==)</p>
|
|
<p><code>.cm-rm-highlight.cm-rm-highlight-token</code>: The == used to begin highlighting</p>
|
|
<p><code>.cm-strikethrough.cm-rm-strike-token</code>: The ~~ used to begin a strike through</p>
|
|
<p><code>.cm-rm-ins.cm-rm-ins-token</code>: The ++ used to begin the insert syntax</p>
|
|
<p><code>.cm-rm-sub.cm-rm-sub-token</code>: The ~ used to begin the sub syntax</p>
|
|
<p><code>.cm-rm-sup.cm-rm-sup-token</code>: The ^ used to begin the sup syntax</p>
|
|
<p><code>pre.cm-rm-hr.CodeMirror-line</code>: Used to support drawing a horizontal rule <a href="https://github.com/CalebJohn/joplin-rich-markdown/blob/main/TIPS.md#horizontal-rule">see here</a></p>
|
|
<p><code>pre.cm-rm-blockquote.CodeMirror-line</code>: The line that contains a block quote</p>
|
|
<p>If you have a suggestion for something you'd like to be able to customize. Just let me know and I'll see whats possible.</p>
|
|
<p>This is disabled by default.</p>
|
|
<h2>Image External Edits</h2>
|
|
<p>If an image is edited, the change will be reflected in the editor within 3s (by default) or immediately after any change to the note. The 3s period can be changed in the settings (under the advanced tab). Setting the value to 0s will prevent the periodic image changes, but image changes will still be picked up when the note is edited.</p>
|
|
<h1>Installation</h1>
|
|
<p>The typical way to install plugins is through the built-in Joplin plugin manager.</p>
|
|
<ul>
|
|
<li>Go to <code>Tools -> Options -> Plugins</code>(macOS: Joplin -> Preferences -> Plugins)</li>
|
|
<li>Search for "Rich Markdown" in the search box</li>
|
|
<li>Click Install and restart Joplin</li>
|
|
</ul>
|
|
<h4>Or</h4>
|
|
<ul>
|
|
<li>Download the <a href="https://github.com/joplin/plugins/raw/master/plugins/plugin.calebjohn.rich-markdown/plugin.jpl">plugin jpl</a></li>
|
|
<li>Go to <code>Tools -> Options -> Plugins</code></li>
|
|
<li>Click on the gear icon and select "Install from file"</li>
|
|
<li>Select the downloaded jpl file</li>
|
|
<li>Restart Joplin</li>
|
|
</ul>
|
|
<h1>Feature Requests</h1>
|
|
<p>Feature Requests are appreciated and encouraged. Not all feature requests will be technically feasible, so please be patient. Feature requests that align with the projects philosophy (below) are more likely to be implemented.</p>
|
|
<p>The aim of this project is to ditch the markdown viewer without trying to turn a markdown document into some kind of unholy WYSIAWYG (what you see is almost what you get). To that end, feature requests that hide markdown or otherwise introduce invisible formatting will be treated skeptically. The intention of this project is not to build the worlds best (most performant, beautiful, etc.) markdown editor, but rather to build something that can make my (and others!) life a little bit nicer.</p>
|
|
<p>Please make feature requests (please prepend the title with Feature Request) <a href="https://github.com/CalebJohn/joplin-rich-markdown/issues">on the github page</a>, or on the <a href="https://discourse.joplinapp.org/t/plugin-rich-markdown/15053">rich markdown forum topic</a>.</p>
|
|
<h1>Tips</h1>
|
|
<p>Go to <a href="https://github.com/CalebJohn/joplin-rich-markdown/blob/main/TIPS.md">Tips</a> to see a collection of CSS styling tips to get the most out of the Rich Markdown plugin.</p>
|
|
<h1>Known Issues</h1>
|
|
<ul>
|
|
<li>file:// links only work with markdown link syntax ([]() <>)</li>
|
|
<li>When hovering over an image on the bottom line, the image will be cut off
|
|
<ul>
|
|
<li>This can be fixed by scrolling the editor down enough to display the image</li>
|
|
</ul>
|
|
</li>
|
|
<li>Links opened on Windows systems will be opened in the background (i.e. the browser won't jump to the front)</li>
|
|
<li>Images with a newline in the title won't be rendered in the editor
|
|
e.g.<pre class="hljs"><code>
|
|
</code></pre>
|
|
</li>
|
|
</ul>
|
|
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<footer class="page-footer">
|
|
<div class="plugin-documentation-section">
|
|
<div class="heading">
|
|
Would you like to submit or develop a plugin? Consult our documentation:
|
|
</div>
|
|
<a class="btn btn-outline-primary" href="https://joplinapp.org/help/api/get_started/plugins">
|
|
See documentation
|
|
</a>
|
|
</div>
|
|
|
|
<div class="links legal-and-about-links">
|
|
<div class="copyright">© Joplin 2023 - 2024</div>
|
|
<a class="link terms-and-conditions" href="/plugins/terms-and-conditions.html">Terms and conditions</a>
|
|
<a class="link privacy" href="/plugins/privacy-policy.html">Privacy policy</a>
|
|
</div>
|
|
|
|
|
|
<div class="site-links">
|
|
<a
|
|
class="a-github"
|
|
href="https://github.com/joplin/website-plugin-discovery"
|
|
aria-label="GitHub"
|
|
title="GitHub"
|
|
>
|
|
<i class="fab fa-github"></i>
|
|
</a>
|
|
<a
|
|
class="a-discord"
|
|
href="https://discord.com/invite/VSj7AFHvpq"
|
|
aria-label="Discord"
|
|
title="Discord"
|
|
>
|
|
<i class="fab fa-discord"></i>
|
|
</a>
|
|
<a
|
|
class="a-linkedin"
|
|
href="https://www.linkedin.com/company/joplin"
|
|
aria-label="LinkedIn"
|
|
title="LinkedIn"
|
|
>
|
|
<i class="fab fa-linkedin"></i>
|
|
</a>
|
|
<a
|
|
class="a-twitter"
|
|
href="https://twitter.com/joplinapp"
|
|
aria-label="Twitter"
|
|
title="Twitter"
|
|
>
|
|
<i class="fab fa-twitter"></i>
|
|
</a>
|
|
<a
|
|
class="a-mastodon"
|
|
href="https://mastodon.social/@joplinapp"
|
|
aria-label="Mastodon"
|
|
title="Mastodon"
|
|
>
|
|
<i class="fab fa-mastodon"></i>
|
|
</a>
|
|
<a
|
|
class="a-patreon"
|
|
href="https://www.patreon.com/joplin"
|
|
aria-label="Patreon"
|
|
title="Patreon"
|
|
>
|
|
<i class="fab fa-patreon"></i>
|
|
</a>
|
|
</div>
|
|
</footer>
|
|
|
|
</body>
|
|
|
|
</html>
|
|
|