MDX
MDX allows you to use JSX in your markdown content.
You can define your components in your notes.
Memodify also has builtin components which support Chart.js and Mermaid.
You can easily embed charts and diagrams into your notes.
Charts (Chart.js)
You can embed a few types of charts supported by Charts.js.
Now Bar, Line and Scatter charts are supported as builtin component.
Bar chart sample
export const width = 256*1.414;
export const height = 256;
export const style = { backgroundColor: "white", padding: "0 4px" }
export const options = {
responsive: false,
maintainAspectRatio: false,
plugins: {
legend: { position: "bottom" },
title: { display: true, text: "Chart.js chart" },
},
}
export const labels = ["January", "February", "March", "April", "May", "June", "July"];
export const barData = {
labels,
datasets: [
{
label: "Dataset 1",
data: labels.map(() => Math.random() * 100),
backgroundColor: "rgba(255, 99, 132, 0.5)",
},
{
label: "Dataset 2",
data: labels.map(() => Math.random() * 100),
backgroundColor: "rgba(53, 162, 235, 0.5)",
},
],
};
<chartjs.Bar style={style} width={width} height={height} options={options} data={barData} />
Diagrams (Mermaid)
You can embed diagrams supported by Mermaid.
Caution
Caution
When using MDX feature in Memodify, it is important to only use content from trusted
sources. MDX can potentially execute malicious code, known as self-XSS, which can
compromise your device's security. I recommend only using MDX with content that you
have personally created or obtained from a trusted source. Use this feature at your
own risk, and always be vigilant when inputting or importing content into the MDX
editor.
Math expressions (KaTeX)
You can use KaTeX to render math expressions.
Syntax Highlighting
Syntax highlighting is supported with Prism.
Lots of languages are recognized. Here is the supported languages.
```javascript
function main() {
console.log("hello, world.");
}
```
```yaml
name: Run a workflow
on:
push:
branches:
- master
- release/[0-9]+\.[0-9]+
env:
SLACK_CHANNEL: general
```
Palette Interface
Command palette
You can use command palette with command + shift + p
.
Note palette
You can focus on a note with note palette. It's activated with command + p
.
Per-note encryption
It's supported to encrypt the focused note body.
crypto:encrypt note body
opens a dialog and you can enter a passphrase.
It converts the body to a JSON object like this.
{
"ciphertext": "dtsLElgKr9p4r5L8xZoiOw==",
"iv": "5aL3VtMJsSRjrYaJ",
"salt": "jOV7M/sQcJaxIB3xj+uaYw=="
}
crypto:decrypt note body
decrypt it.
Note Currenly the preview shows an error like this
because {...}
is recognized as an MDX expression. I'm going to suppress this in the future.
2:15 Could not parse expression with acorn: Unexpected content after expression
Pomodoro dialog
You can open a pomodoro dialog with pomodoro:open dialog
palette command.
Start, pause and cancel the timer with the buttons.
Succeeded and canceled pomodoros are recorded for a day.