mProjectsCode / obsidian-js-engine-plugin

https://www.moritzjung.dev/obsidian-js-engine-plugin-docs/
GNU General Public License v3.0
73 stars 5 forks source link

Is it possible to use js-engine to generate other code blocks programmatically? #16

Closed claremacrae closed 3 months ago

claremacrae commented 3 months ago

This plugin looks really useful - thank you very much!

I have been using DataView to generate Mermaid code blocks, but this seems rather lighter weight.

For example, assuming I have code to generate this text, could I make JS Engine render it?

```mermaid
flowchart LR

classDef TODO        stroke:#f33,stroke-width:3px;
classDef IN_PROGRESS stroke:#fa0,stroke-width:3px;

13["'1'<br>[1] -> [2]<br>(TODO)"]:::TODO
14["'2'<br>[2] -> [3]<br>(IN_PROGRESS)"]:::IN_PROGRESS
13 --> 14
```
claremacrae commented 3 months ago

Ah ok, it works the same as dataview, so creating a paragraph does the trick.

Here are some examples:


## Tasks plugin query

```js-engine
let markdownBuilder = engine.markdown.createBuilder();

let tasksQuery = `
~~~tasks
    limit 1
    not done

`;

markdownBuilder.createParagraph(tasksQuery); return markdownBuilder;


## Mermaid

```js-engine
let markdownBuilder = engine.markdown.createBuilder();

let mermaidDiagram = `
~~~mermaid
    flowchart LR

    classDef TODO        stroke:#f33,stroke-width:3px;
    classDef IN_PROGRESS stroke:#fa0,stroke-width:3px;

    13["'1'<br>[1] -> [2]<br>(TODO)"]:::TODO
    14["'2'<br>[2] -> [3]<br>(IN_PROGRESS)"]:::IN_PROGRESS
    13 --> 14
~~~
`;

markdownBuilder.createParagraph(mermaidDiagram);
return markdownBuilder;
mProjectsCode commented 3 months ago

this works, but if you want to stick with the markdown builder, there is a dedicated method for code blocks

claremacrae commented 3 months ago

aaahhh - much nicer, thanks.

## Tasks plugin query

```js-engine

let markdownBuilder = engine.markdown.createBuilder();

let tasksQuery = `
    not done
    limit 1
    short mode
`;

markdownBuilder.createCodeBlock('tasks', tasksQuery);

return markdownBuilder;
```

## Mermaid

```js-engine

let markdownBuilder = engine.markdown.createBuilder();

let mermaidDiagram = `
    flowchart LR

    classDef TODO        stroke:#f33,stroke-width:3px;
    classDef IN_PROGRESS stroke:#fa0,stroke-width:3px;

    13["'1'<br>[1] -> [2]<br>(TODO)"]:::TODO
    14["'2'<br>[2] -> [3]<br>(IN_PROGRESS)"]:::IN_PROGRESS
    13 --> 14
`;

markdownBuilder.createCodeBlock('mermaid', mermaidDiagram);

return markdownBuilder;
```