zhanshi/goldmark
1
0
Fork 0
mirror of https://github.com/yuin/goldmark synced 2025-03-04 23:04:52 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Support mobile devices

Browse source
This commit is contained in:
yuin 2024-02-06 19:01:19 +09:00
parent ba73e86db0
commit c6f5127385
4 changed files with 143 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
docs/playground/index.html
View file

@ -2,6 +2,7 @@
<head>
<meta charset="utf-8">
<title>goldmark playground</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./playground.css">
<script src="./wasm_exec.js"></script>
<script>
@ -99,6 +100,28 @@
resp.arrayBuffer()
).then(bytes => WebAssembly.instantiate(bytes, go.importObject).then(onload));
}
[...document.querySelectorAll('#container pre')]
.map(pre => {
const button = document.createElement('button');
pre.parentNode.insertBefore(button, pre);
button.textContent = 'copy';
button.classList.add('pre-copy');
let timer;
button.addEventListener('click', () => {
const textarea = document.createElement('textarea');
pre.appendChild(textarea);
textarea.value = pre.innerText;
textarea.select();
document.execCommand('copy');
pre.removeChild(textarea);
button.textContent = 'copied';
clearTimeout(timer);
timer = setTimeout(() => {
button.textContent = 'copy';
}, 500);
});
});
});
@ -113,7 +136,7 @@
table:<input type="checkbox" name="optTableExtension"/ >&nbsp;
strikethrough:<input type="checkbox" name="optStrikethroughExtension"/ >&nbsp;
linkify:<input type="checkbox" name="optLinkifyExtension"/ >&nbsp;
taklist:<input type="checkbox" name="optTaskListExtension"/ >&nbsp;
tasklist:<input type="checkbox" name="optTaskListExtension"/ >&nbsp;
definition list:<input type="checkbox" name="optDefinitionListExtension"/ >&nbsp;
footnote:<input type="checkbox" name="optFootnoteExtension"/ >&nbsp;
typographer:<input type="checkbox" name="optTypographerExtension"/ >&nbsp;

61
docs/playground/playground.css
View file

@ -1036,25 +1036,47 @@ body ::-webkit-calendar-picker-indicator {
filter: invert(50%);
}
#container {
display: flex;
@media screen and (min-width: 768px) {
#container {
display: flex;
flex-direction: row;
}
#markdown {
flex-direction: column;
padding: 1em;
width: 50%;
}
#output {
flex-direction: column;
width: 50%;
}
}
#markdown {
flex-direction: column;
padding: 1em;
width: 50%;
@media screen and (max-width: 768px) {
#container {
display: flex;
flex-direction: column;
}
#markdown {
flex-direction: column;
padding: 1em;
width: 100%;
}
#output {
flex-direction: column;
width: 100%;
}
}
#markdown div {
margin-bottom: 1em;
}
#output {
flex-direction: column;
width: 50%;
}
#clear {
background-color: transparent;
color: var(--color-accent-fg);
@ -1087,8 +1109,7 @@ body ::-webkit-calendar-picker-indicator {
}
.tab-content {
width: 100%;
overflow: scroll;
width: 99%;
display: none;
margin-top: 1em;
}
@ -1113,3 +1134,17 @@ body ::-webkit-calendar-picker-indicator {
.tab-switch {
display: none;
}
#html pre {
margin-top: -2em;
padding-top: 1em;
}
button.pre-copy {
top: -1em;
left: calc( 100% - 3em );
position: relative;
padding: 0.1em;
font-size: .8em;
cursor: pointer;
}

24
src/playground/index.html
View file

@ -2,6 +2,7 @@
<head>
<meta charset="utf-8">
<title>goldmark playground</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./playground.css">
<script src="./wasm_exec.js"></script>
<script>
@ -99,6 +100,27 @@
resp.arrayBuffer()
).then(bytes => WebAssembly.instantiate(bytes, go.importObject).then(onload));
}
for(const pre of [...document.querySelectorAll('#container pre')]){
const button = document.createElement('button');
pre.parentNode.insertBefore(button, pre);
button.textContent = 'copy';
button.classList.add('pre-copy');
let timer;
button.addEventListener('click', () => {
const textarea = document.createElement('textarea');
pre.appendChild(textarea);
textarea.value = pre.innerText;
textarea.select();
document.execCommand('copy');
pre.removeChild(textarea);
button.textContent = 'copied';
clearTimeout(timer);
timer = setTimeout(() => {
button.textContent = 'copy';
}, 500);
});
}
});
@ -113,7 +135,7 @@
table:<input type="checkbox" name="optTableExtension"/ >&nbsp;
strikethrough:<input type="checkbox" name="optStrikethroughExtension"/ >&nbsp;
linkify:<input type="checkbox" name="optLinkifyExtension"/ >&nbsp;
taklist:<input type="checkbox" name="optTaskListExtension"/ >&nbsp;
tasklist:<input type="checkbox" name="optTaskListExtension"/ >&nbsp;
definition list:<input type="checkbox" name="optDefinitionListExtension"/ >&nbsp;
footnote:<input type="checkbox" name="optFootnoteExtension"/ >&nbsp;
typographer:<input type="checkbox" name="optTypographerExtension"/ >&nbsp;

61
src/playground/playground.css
View file

@ -1036,25 +1036,47 @@ body ::-webkit-calendar-picker-indicator {
filter: invert(50%);
}
#container {
display: flex;
@media screen and (min-width: 768px) {
#container {
display: flex;
flex-direction: row;
}
#markdown {
flex-direction: column;
padding: 1em;
width: 50%;
}
#output {
flex-direction: column;
width: 50%;
}
}
#markdown {
flex-direction: column;
padding: 1em;
width: 50%;
@media screen and (max-width: 768px) {
#container {
display: flex;
flex-direction: column;
}
#markdown {
flex-direction: column;
padding: 1em;
width: 100%;
}
#output {
flex-direction: column;
width: 100%;
}
}
#markdown div {
margin-bottom: 1em;
}
#output {
flex-direction: column;
width: 50%;
}
#clear {
background-color: transparent;
color: var(--color-accent-fg);
@ -1087,8 +1109,7 @@ body ::-webkit-calendar-picker-indicator {
}
.tab-content {
width: 100%;
overflow: scroll;
width: 99%;
display: none;
margin-top: 1em;
}
@ -1113,3 +1134,17 @@ body ::-webkit-calendar-picker-indicator {
.tab-switch {
display: none;
}
#html pre {
margin-top: -2em;
padding-top: 1em;
}
button.pre-copy {
top: -1em;
left: calc( 100% - 3em );
position: relative;
padding: 0.1em;
font-size: .8em;
cursor: pointer;
}