Skip to content

Commit

Permalink
Update katex delimiter, and can be set to width and height in abc、ech…
Browse files Browse the repository at this point in the history 
…arts、vega extension.
  • Loading branch information
@jhuix
jhuix committed Aug 9, 2024
1 parent 98b0aeb commit fed2e0e
Show file tree
Hide file tree
Showing 8 changed files with 243 additions and 139 deletions.
2 changes: 1 addition & 1 deletion demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -138,7 +138,7 @@
.then(res => {
if (typeof res === 'object') {
element.innerHTML = res.html;
showdowns.completedHtml(res.scripts);
showdowns.completedHtml(res.scripts, '.showdowns');
} else {
element.innerHTML = res;
}
Expand Down
49 changes: 43 additions & 6 deletions public/showdowns-features.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -311,7 +311,7 @@ delta Q = rho \ c \u
where:
* @@delta Q@@ is the internal heat energy per unit volume \\~(J \* m^-3)\\~
* @@delta Q@@ is the internal heat energy per unit volume \\$(J \* m^-3)\\$
### Mermaid
Expand Down Expand Up @@ -607,14 +607,14 @@ It's implemented in showdown-viz.js, render diagrams of wavedrom using [wavedrom
#### Markdown Syntax

````
```echarts {"align": "left | center | right", "codeblock": true | false, "width":400, "height":300}
```echarts {"align": "left | center | right", "codeblock": true | false, "width":400, "height":300, "type": "javascript" | "json"}
<code content>
```
````

#### Echarts example

```echarts {"align":"center"}
```echarts {"align":"center", "width":640, "height":480}
{
"title": { "text": "最近 30 天" },
"tooltip": { "trigger": "axis", "axisPointer": { "lineStyle": { "width": 0 } } },
Expand Down Expand Up @@ -644,22 +644,59 @@ It's implemented in showdown-viz.js, render diagrams of wavedrom using [wavedrom
}
```

```echarts {"align":"center", "width":640, "height":480, "type":"javascript"}
const data = [];
for (let i = 0; i <= 100; i++) {
let theta = (i / 100) * 360;
let r = 5 * (1 + Math.sin((theta / 180) * Math.PI));
data.push([r, theta]);
}
const option = {
title: {
text: 'Two Value-Axes in Polar'
},
legend: {
data: ['line']
},
polar: {},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
angleAxis: {
type: 'value',
startAngle: 0
},
radiusAxis: {},
series: [
{
coordinateSystem: 'polar',
name: 'line',
type: 'line',
data: data
}
]
};
```

### Vega and Vega-Lite

It's implemented in showdown-vega.js, render diagrams of [Vega](https://github.com/vega/vega) and [Vega-Lite](https://github.com/vega/vega-lite) using [vega-embed](https://github.com/vega/vega-embed), check [vega website](https://vega.github.io/vega/) and [vega-lite website](https://vega.github.io/vega-lite) for more information.

#### Markdown Syntax

````
```vega {"align": "left | center | right", "codeblock": true | false}
```vega {"align": "left | center | right", "codeblock": true | false, "type": "javascript" | "json"}
<code content>
```
````

OR

````
```vega-lite {"align": "left | center | right", "codeblock": true | false}
```vega-lite {"align": "left | center | right", "codeblock": true | false, "type": "javascript" | "json"}
<code content>
```
````
Expand Down Expand Up @@ -854,7 +891,7 @@ Bob-->Alice: I am good thanks!

#### ABC example

```abc
```abc {"width": 640}
T: Cooley's
M: 4/4
Q: 1/4=120
Expand Down
191 changes: 108 additions & 83 deletions src/extensions/showdown-abc.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,107 +57,108 @@ function unloadScript() {

const scriptCode = `
var abcOptions = {
add_classes: true,
responsive: "resize"
add_classes: true,
responsive: "resize"
};
function cursorControl(id) {
const self = this;
const self = this;
self.onReady = function() {
};
self.onStart = function() {
self.onReady = function() {
};
self.onStart = function() {
const tag = "#"+ id + " svg";
const svg = document.querySelector(tag);
const cursor = document.createElementNS("http://www.w3.org/2000/svg", "line");
cursor.setAttribute("class", "abcjs-cursor");
cursor.setAttributeNS(null, 'x1', 0);
cursor.setAttributeNS(null, 'y1', 0);
cursor.setAttributeNS(null, 'x2', 0);
cursor.setAttributeNS(null, 'y2', 0);
svg.appendChild(cursor);
};
self.beatSubdivisions = 2;
self.onBeat = function(beatNumber, totalBeats, totalTime) {
};
self.onEvent = function(ev) {
if (ev.measureStart && ev.left === null)
return; // this was the second part of a tie across a measure line. Just ignore it.
const svg = document.querySelector(tag);
const cursor = document.createElementNS("http://www.w3.org/2000/svg", "line");
cursor.setAttribute("class", "abcjs-cursor");
cursor.setAttributeNS(null, 'x1', 0);
cursor.setAttributeNS(null, 'y1', 0);
cursor.setAttributeNS(null, 'x2', 0);
cursor.setAttributeNS(null, 'y2', 0);
svg.appendChild(cursor);
};
self.beatSubdivisions = 2;
self.onBeat = function(beatNumber, totalBeats, totalTime) {
};
self.onEvent = function(ev) {
if (ev.measureStart && ev.left === null)
return; // this was the second part of a tie across a measure line. Just ignore it.
const className = "#"+ id + " svg .highlight";
const lastSelection = document.querySelectorAll(className);
for (let k = 0; k < lastSelection.length; k++)
lastSelection[k].classList.remove("highlight");
const className = "#"+ id + " svg .highlight";
const lastSelection = document.querySelectorAll(className);
for (let k = 0; k < lastSelection.length; k++)
lastSelection[k].classList.remove("highlight");
for (let i = 0; i < ev.elements.length; i++ ) {
const note = ev.elements[i];
for (let j = 0; j < note.length; j++) {
note[j].classList.add("highlight");
}
}
for (let i = 0; i < ev.elements.length; i++ ) {
const note = ev.elements[i];
for (let j = 0; j < note.length; j++) {
note[j].classList.add("highlight");
}
}
const tag = "#"+ id + " svg .abcjs-cursor";
const cursor = document.querySelector(tag);
if (cursor) {
cursor.setAttribute("x1", ev.left - 2);
cursor.setAttribute("x2", ev.left - 2);
cursor.setAttribute("y1", ev.top);
cursor.setAttribute("y2", ev.top + ev.height);
}
};
self.onFinished = function() {
const className = "#"+ id + " svg .highlight";
const els = document.querySelectorAll(className);
for (let i = 0; i < els.length; i++ ) {
els[i].classList.remove("highlight");
}
const cursor = document.querySelector(tag);
if (cursor) {
cursor.setAttribute("x1", ev.left - 2);
cursor.setAttribute("x2", ev.left - 2);
cursor.setAttribute("y1", ev.top);
cursor.setAttribute("y2", ev.top + ev.height);
}
};
self.onFinished = function() {
const className = "#"+ id + " svg .highlight";
const els = document.querySelectorAll(className);
for (let i = 0; i < els.length; i++ ) {
els[i].classList.remove("highlight");
}
const tag = "#"+ id + " svg .abcjs-cursor";
const cursor = document.querySelector(tag);
if (cursor) {
cursor.setAttribute("x1", 0);
cursor.setAttribute("x2", 0);
cursor.setAttribute("y1", 0);
cursor.setAttribute("y2", 0);
}
};
const cursor = document.querySelector(tag);
if (cursor) {
cursor.setAttribute("x1", 0);
cursor.setAttribute("x2", 0);
cursor.setAttribute("y1", 0);
cursor.setAttribute("y2", 0);
}
};
}
function load(audio, render) {
let synthControl;
const id = "#" + audio;
if (ABCJS.synth.supportsAudio()) {
synthControl = new ABCJS.synth.SynthController();
synthControl.load(id, new cursorControl(render.id), {displayLoop: true, displayRestart: true, displayPlay: true, displayProgress: true, displayWarp: true});
} else {
document.querySelector(id).innerHTML = "<div class='audio-error'>Audio is not supported in this browser.</div>";
}
setTune(render, false, synthControl);
if (audio) {
const id = "#" + audio;
if (ABCJS.synth.supportsAudio()) {
synthControl = new ABCJS.synth.SynthController();
synthControl.load(id, new cursorControl(render.id), {displayLoop: true, displayRestart: true, displayPlay: true, displayProgress: true, displayWarp: true});
} else {
document.querySelector(id).innerHTML = "<div class='audio-error'>Audio is not supported in this browser.</div>";
}
}
setTune(render, false, synthControl);
}
function setTune(render, userAction, synthControl) {
const id = render.id;
const abc = render.data;
if (!synthControl) {
ABCJS.renderAbc(id, abc, abcOptions)[0];
ABCJS.renderAbc(id, abc, abcOptions);
return;
}
synthControl.disable(true);
const visualObj = ABCJS.renderAbc(id, abc, abcOptions)[0];
const midiBuffer = new ABCJS.synth.CreateSynth();
midiBuffer.init({
visualObj: visualObj,
}).then(function (response) {
// console.log(response);
synthControl.setTune(visualObj, userAction).then(function (response) {
console.log("Audio successfully loaded.");
}).catch(function (error) {
console.warn("Audio problem:", error);
});
}).catch(function (error) {
console.warn("Audio problem:", error);
});
const visualObj = ABCJS.renderAbc(id, abc, abcOptions)[0];
const midiBuffer = new ABCJS.synth.CreateSynth();
midiBuffer.init({
visualObj: visualObj,
}).then(function (response) {
// console.log(response);
synthControl.setTune(visualObj, userAction).then(function (response) {
console.log("Audio successfully loaded.");
}).catch(function (error) {
console.warn("Audio problem:", error);
});
}).catch(function (error) {
console.warn("Audio problem:", error);
});
}
`;

Expand All @@ -166,24 +167,48 @@ function onRenderAbc(resolve, scripts, meta) {
const id = meta.id;
const name = meta.className;
const container = meta.container;
let html = `<div id="${container}">`;
html += `<div id="${id}" class="${name}"></div>`;
let style = '';
if (meta.lang) {
if (meta.lang.width) {
style += `width:${meta.lang.width};`;
}
if (meta.lang.height) {
style += `height:${meta.lang.height};`;
}
}
let html = '';
if (style) {
html += `<div id="${container}" class="${name}" style="${style}">`;
html += `<div id="${id}" style="width:100%;height:100%;display:inline-block"></div>`;
} else {
html += `<div id="${container}" class="${name}">`;
html += `<div id="${id}"></div>`;
}
if (!meta.lang || !meta.lang.audio) {
const data = meta.data;
const doc = meta.element.ownerDocument;
html += '</div>';
meta.element.parentNode.outerHTML = html;
const element = doc.getElementById(id);
ABCJS.renderAbc(element, data);
ABCJS.renderAbc(element, data, {
add_classes: true,
responsive: "resize"
});
return resolve(true);
}

const cssLink = meta.cssLink;
const data = meta.data;
const audio = id + '-audio';
html += cssLink
? `<div id="${audio}" class="css-abc" data-css="${cssLink}"></div>`
: `<div id="${audio}"></div>`;
if (style) {
html += cssLink
? `<div id="${audio}" style="width:100%;height:100%;display:inline-block" class="css-abc" data-css="${cssLink}"></div>`
: `<div id="${audio}" style="width:100%;height:100%;display:inline-block"></div>`;
} else {
html += cssLink
? `<div id="${audio}" class="css-abc" data-css="${cssLink}"></div>`
: `<div id="${audio}"></div>`;
}
html += '</div>';
meta.element.parentNode.outerHTML = html;
const script = {
Expand Down
Loading

0 comments on commit fed2e0e

Please sign in to comment.