This is a H2 Title
This is a H3 Title
This is a H4 Title
this is a test
mdx
Hello world!
Written by: Jane and John.
Published on: February 1, 2022.
Syntax highlighting
We also support syntax highlighting in MDX out-of-the-box! This example uses the default Shiki theme. See the MDX integration docs for configuration options.
hello world ! this is a javascript code.
console.log("hello javascript!");unocss inspector
http://localhost:4321/\_\_unocss
shiki transformers
https://shiki.style/packages/transformers
search util
- fuse.js
- minisearch
- pagefind
Footnote
test shiki transformers
warning & error
console.log("No errors or warnings");
console.error("Error");
console.warn("Warning"); focus
console.log("Not focused");
console.log("Focused");
console.log("Not focused");diff
console.log("hewwo");
console.log("hello");
console.log("goodbye");Highlight
console.log("Not highlighted");
console.log("Highlighted");
console.log("Not highlighted");About
Here are some code snippets 1:
console.log("Hello, world!");print('Hello, world!')Here are some more code snippets 2:
console.log("Hello from group 2!");print('Hello from group 2!')html and js
<div class="tabs-code">
<div class="tabs-code-nav">
<button class="tabs-code-label active">tab01</button>
<button class="tabs-code-label">tab02</button>
<button class="tabs-code-label">tab03</button>
</div>
<div class="tabs-code-main">
<div class="tabs-code-item active">
<button class="copy-code-button">Copy</button>
<pre>
<code>Content for tab01</code>
</pre>
</div>
<div class="tabs-code-item">
<button class="copy-code-button">Copy</button>
<pre>
<code>Content for tab02</code>
</pre>
</div>
<div class="tabs-code-item">
<button class="copy-code-button">Copy</button>
<pre>
<code>Content for tab03</code>
</pre>
</div>
</div>
</div>.tabs-code-nav {
background-color: #f1f1f1;
overflow: hidden;
width: 100%;
white-space: nowrap;
overflow: auto;
}
.tabs-code-label {
background-color: inherit;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: background-color 0.3s;
border-bottom: 3px solid transparent;
max-width: 200px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}import { toHtml } from "hast-util-to-html";
import { toHast } from "mdast-util-to-hast";
const mdast = {
type: "paragraph",
children: [
{
type: "mark",
children: [{ type: "text", value: "x" }],
data: { hName: "mark" },
},
{
type: "element",
tagName: "b",
data: { hProperties: { className: ["responsive"] } },
children: [{ type: "text", value: "Alpha" }],
},
{
type: "code",
lang: "js",
data: {
hChildren: [
{
type: "element",
tagName: "span",
properties: { className: ["hljs-meta"] },
children: [{ type: "text", value: '"use strict"' }],
},
{ type: "text", value: ";" },
],
},
value: '"use strict";',
},
],
};
console.log(toHtml(toHast(mdast)));without tab
console.log("without tab");.main {
display: flex;
}<div class="main">
<h1>Home</h1>
</div>GFM
Autolink literals
www.example.com, https://example.com, and contact@example.com.
heading b
this is a test
hello world ! this is a typescript code.
heading c
lorem10
this is a test ! this is a typescript code.
without tab and lang
console.log('without tab and lang')Strikethrough
one or two tildes.
Table
| a | b | c | d |
|---|
Tasklist
- to do
- done
footer
back to hello md
to hello md with a href
this is a hrefhtml code live
<style>
.text {
font-size: 12px;
color: red;
}
</style>
<div class="text" id="hello">Hello World</div>
<div><button id="button">Click Open Iframe MDN</button></div>
<div><button class="fullscreen">Click fullscreen</button></div>
<form action="">
<input type="text" name="hello" id="hello" value="hello" />
<input type="submit" value="Submit" />
</form>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
function toggleFullScreen(elem) {
if (
(document.fullScreenElement !== undefined &&
document.fullScreenElement === null) ||
(document.msFullscreenElement !== undefined &&
document.msFullscreenElement === null) ||
(document.mozFullScreen !== undefined && !document.mozFullScreen) ||
(document.webkitIsFullScreen !== undefined &&
!document.webkitIsFullScreen)
) {
if (elem.requestFullScreen) {
elem.requestFullScreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullScreen) {
elem.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
}
} else {
if (document.cancelFullScreen) {
document.cancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
}
}
$(document).ready(function () {
// 代码
$(".text").css("font-size", "20px").css("color", "blue");
$(".text").click(function () {
alert("jQuery , Hello World");
});
$("#button").click(function () {
window.open(
"https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/iframe",
"_blank"
);
});
// 全屏
$(".fullscreen").click(function () {
toggleFullScreen(document.querySelector(".fullscreen"));
});
});
</script>html css live
<style>
.text {
font-size: 20px;
color: #000;
width: 100%;
background: red;
}
</style>
<div class="text" id="hello">Hello World</div>
<script>
var el = document.querySelector("#hello");
el.onclick = function () {
console.log("Hello World");
el.style.height = "800px";
};
</script><head>
<style>
.text {
font-size: 12px;
color: #000;
width: 100%;
background: red;
}
</style>
</head>
<body>
<button id="btn1">123</button>
<button id="btn2">456</button>
<div class="text" id="hello">Hello World</div>
</body>
<script>
var el = document.querySelector("#hello");
var btn1 = document.querySelector("#btn1");
var btn2 = document.querySelector("#btn2");
btn1.onclick = function () {
console.log("Hello World");
el.style.height = "200px";
};
btn2.onclick = function () {
console.log("Hello World");
el.style.height = "800px";
};
</script>