mirror of https://github.com/joplin/website.git
357 lines
14 KiB
HTML
357 lines
14 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 - Math Mode</title>
|
|
|
|
<meta property="og:title" content="Joplin Plugin: Math Mode"/>
|
|
<meta property="og:description" content="Turn your notes into a powerful calculator with inline math."/>
|
|
<meta property="og:image" content="https://raw.githubusercontent.com/CalebJohn/joplin-math-mode/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">Math Mode</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-math-mode/HEAD/icons/128.png"
|
|
alt="Plugin icon"
|
|
/>
|
|
<div>
|
|
<h1 class="card-title">Math Mode</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-editor">
|
|
<i class="fas fa-tag"></i> editor
|
|
</a>
|
|
<a class="plugin-category me-2 badge" href="/plugins/#tab-productivity">
|
|
<i class="fas fa-tag"></i> productivity
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="download-link-container">
|
|
<a
|
|
href="/plugins/downloadPlugin.html?plugin=plugin.calebjohn.MathMode"
|
|
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-math-mode/HEAD/examples/road_trip.png" alt="An example demonstrating how the plugin can be used to to track multiple simple calculations."/>
|
|
<img src="https://raw.githubusercontent.com/CalebJohn/joplin-math-mode/HEAD/examples/euro_trip.png" alt="An example demonstrating the ability to do currency conversion."/>
|
|
</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">Turn your notes into a powerful calculator with inline math.</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-math-mode style="display: block;"><i class="fa-solid fa-link"></i> Repository</a></li>
|
|
<li><a href=https://github.com/CalebJohn/joplin-math-mode#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.MathMode"
|
|
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.7.1</td></tr>
|
|
<tr><th>Minimum app version:</th><td>1.8</td></tr>
|
|
<tr><th>Downloads: This version:</th><td>1263</td></tr>
|
|
<tr><th>Last updated:</th><td class="process--format-as-local-time">2024-09-28T17:09:39Z</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="container section" id="readme" data--is-rendered-markdown>
|
|
|
|
<h1>Math Mode</h1>
|
|
<p>A plugin for inputting and evaluating math in markdown code blocks. It's built on top of the excellent <a href="https://mathjs.org/">mathjs</a>, meaning it can be used to perform symbolic calculation, vector math and can even handle units!</p>
|
|
<p>So what can it do? It's better to demonstrate with an example.</p>
|
|
<p><img src="https://raw.githubusercontent.com/CalebJohn/joplin-math-mode/main/examples/euro_trip.png" alt="Screenshot of using math mode to plan a road trip" /></p>
|
|
<p>Try some of these!</p>
|
|
<pre><code>= derivative('x^2 + x', 'x')
|
|
|
|
= 5cm + 0.2 m in inch
|
|
|
|
= i^2
|
|
|
|
= 10.15 USD to CAD
|
|
|
|
```math
|
|
M = [1, 3; 4, 6]
|
|
|
|
size(M)
|
|
transpose(M)
|
|
diag(M)
|
|
det(M)
|
|
```
|
|
|
|
```math
|
|
combinations(6, 3)
|
|
permutations(6, 3)
|
|
```
|
|
</code></pre>
|
|
<p>View all examples in <a href="https://github.com/CalebJohn/joplin-math-mode/blob/main/examples">the examples folder</a>. If you have an example of your own, please consider adding it to the examples directory, or sending it my way to have added. Thanks!</p>
|
|
<p>Plus <a href="https://mathjs.org/docs/reference/functions.html">many more functions</a> provided by mathjs.</p>
|
|
<h1>Installation</h1>
|
|
<ul>
|
|
<li>Go to <code>Tools -> Options -> Plugins</code>(macOS: Joplin -> Preferences -> Plugins)</li>
|
|
<li>Search for "Math Mode" 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.MathMode/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>Configuration</h1>
|
|
<p>Math Mode supports a small number of settings that can be adjusted by placing a "config line" inside a math block. The defaults can be changed under Tools -> Options -> Math Mode (macOS: Joplin -> Preferences -> Math Mode). The supported settings are (defaults listed first):</p>
|
|
<pre><code>```math
|
|
global: no | yes
|
|
simplify: no | yes
|
|
bignumber: no | yes
|
|
displaytotal: no | yes
|
|
hide: no | expression | result
|
|
verbose: yes | no
|
|
inline: yes | no
|
|
notation: auto | exponential | engineering | fixed
|
|
precision: Any number between 0 and 16
|
|
align: left | right
|
|
```
|
|
</code></pre>
|
|
<p>Where
|
|
<code>global</code> determines if the following settings (within the same block) will apply to all the following blocks (and code lines).</p>
|
|
<p><code>simplify</code> will direct the math engine to simplify rather than solve expressions. This does not work with most expressions so use with caution.</p>
|
|
<p><code>bignumber</code> will us the mathjs <a href="https://mathjs.org/docs/datatypes/bignumbers.html"><code>BigNumber</code></a> with 128 bit precision. <code>bignumber</code> and <code>simplify</code> are incompatible.</p>
|
|
<p><code>displaytotal</code> rather than showing the result of a line, showing the running total of the block.</p>
|
|
<p><code>hide</code> will hide either a math expression or result.</p>
|
|
<p><code>verbose</code> determines if just the result of the expression should be shown, or the variable name as well.</p>
|
|
<p><code>inline</code> should the result be placed on the same line as the expression, or below.</p>
|
|
<p><code>notation</code> passed to the <a href="https://mathjs.org/docs/reference/functions/format.html#where">mathjs format function</a>, this is the numerical format to use for results.</p>
|
|
<p><code>precision</code> the number of digits in a result (if notation is "fixed", then precision is decimal places), 0 to show all. See <a href="https://mathjs.org/docs/reference/functions/format.html">mathjs docs</a>.</p>
|
|
<p><code>align</code> place the result on the left or right of the editor window.</p>
|
|
<h1>Roadmap</h1>
|
|
<h3>TODO</h3>
|
|
<ul>
|
|
<li>[ ] Add a markdown-It renderer plugin to get the output on both views</li>
|
|
<li>[x] Add syntax or a method for sum calculations</li>
|
|
<li>[x] Add configuration to settings menu</li>
|
|
</ul>
|
|
<h3>Ideas</h3>
|
|
<p>There is no plan to implement any of these ideas, but there might be eventually.</p>
|
|
<ul>
|
|
<li>[ ] Support input in latex format (and maybe in $...$)
|
|
- Maybe also support just saving math into a latex format (this is easier with mathjs)</li>
|
|
<li>[ ] Fix math mode greedily highlighting after ```math (probably need a custom mode)</li>
|
|
</ul>
|
|
|
|
<p>Inspired by <a href="https://github.com/sulami/literate-calc-mode.el">literate-calc-mode</a> for emacs by <a href="https://github.com/sulami">sulami</a></p>
|
|
<p>Thanks to the European Central Bank for <a href="https://www.ecb.europa.eu/stats/policy_and_exchange_rates/euro_reference_exchange_rates/html/index.en.html">providing daily exchange rates</a></p>
|
|
<p>This project uses icons (without modification) which are provided free under the <a href="https://fontawesome.com/license/free">CC BY 4.0 License</a> by the Font Awesome project.</p>
|
|
|
|
</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>
|
|
|