More updates
This commit is contained in:
parent
00fa414474
commit
eeda00bd00
8 changed files with 6124 additions and 297 deletions
|
|
@ -1,9 +1,17 @@
|
|||
import hljs from "highlight.js";
|
||||
import MarkdownIt from "markdown-it";
|
||||
import Token from "markdown-it/lib/token.mjs";
|
||||
import { alert } from "@mdit/plugin-alert";
|
||||
import { figure } from "@mdit/plugin-figure";
|
||||
import TeXToSVG from "tex-to-svg";
|
||||
import { tab } from "@mdit/plugin-tab";
|
||||
import { tasklist } from "@mdit/plugin-tasklist";
|
||||
import { mark } from "@mdit/plugin-mark";
|
||||
import { footnote } from "@mdit/plugin-footnote";
|
||||
import { align } from "@mdit/plugin-align";
|
||||
|
||||
export default function configured_markdown(): MarkdownIt {
|
||||
const md: MarkdownIt = MarkdownIt({
|
||||
var md: MarkdownIt = MarkdownIt({
|
||||
breaks: true,
|
||||
typographer: true,
|
||||
html: true,
|
||||
|
|
@ -23,6 +31,27 @@ export default function configured_markdown(): MarkdownIt {
|
|||
"</code></pre>";
|
||||
},
|
||||
});
|
||||
// .use(figure, {
|
||||
// mathFence: true,
|
||||
// render: (content: any, displayMode: any) => {
|
||||
// // render tex here and return svg
|
||||
// console.log("figure render");
|
||||
// console.log(content);
|
||||
// return TeXToSVG(content);
|
||||
// },
|
||||
// });
|
||||
|
||||
md = md.use(tab)
|
||||
.use(tasklist)
|
||||
.use(mark)
|
||||
.use(footnote)
|
||||
.use(alert, {
|
||||
alertNames: [
|
||||
"note", "info", "warning", "danger", "todo", "tip",
|
||||
"important", "success", "caution", "question", "done",
|
||||
"quote", "deprecated", "example"
|
||||
],
|
||||
});
|
||||
|
||||
md.renderer.rules.text = function (tokens, idx, options, env, self) {
|
||||
// headers 1-3 get an <hr> after them - With a class (md-hr-N) for styling
|
||||
|
|
|
|||
1
assets/md_plugins/checkbox.ts
Normal file
1
assets/md_plugins/checkbox.ts
Normal file
|
|
@ -0,0 +1 @@
|
|||
import MarkdownIt from "markdown-it";
|
||||
|
|
@ -2,8 +2,6 @@
|
|||
import configured_markdown from '~/assets/markdown_conf';
|
||||
import { useSlots } from 'vue';
|
||||
|
||||
let markdown = configured_markdown();
|
||||
|
||||
const text = ref("");
|
||||
const loading = ref(true);
|
||||
|
||||
|
|
@ -17,7 +15,7 @@ function render_markdown(data: string | undefined) {
|
|||
loading.value = false;
|
||||
return;
|
||||
}
|
||||
text.value = markdown.render(data);
|
||||
text.value = configured_markdown().render(data);
|
||||
loading.value = false
|
||||
}
|
||||
|
||||
|
|
@ -45,6 +43,141 @@ watch(() => props.text, (newVal) => {
|
|||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
/* Markdown alerts get a box, a shadow, and a background+border color */
|
||||
.md-contents .markdown-alert:not(.md-override) {
|
||||
border: 1px solid #A020F0;
|
||||
background-color: #333;
|
||||
box-shadow: 0 0 7px #A020F0;
|
||||
padding: 0.5rem;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
.md-contents .markdown-alert-title {
|
||||
font-weight: bold;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.md-contents .markdown-alert-warning:not(.md-override) {
|
||||
border: 1px solid #FFA500;
|
||||
background-color: #aa6600;
|
||||
box-shadow: 0 0 7px #FFA500;
|
||||
}
|
||||
|
||||
.md-contents .markdown-alert-warning .markdown-alert-title:not(.md-override):before {
|
||||
content: "⚠️ ";
|
||||
text-shadow: 1px 1px 1px #000;
|
||||
}
|
||||
.md-contents .markdown-alert-danger:not(.md-override) {
|
||||
border: 1px solid #FF0000;
|
||||
background-color: #aa0000;
|
||||
box-shadow: 0 0 7px #FF0000;
|
||||
}
|
||||
.md-contents .markdown-alert-danger .markdown-alert-title:not(.md-override):before {
|
||||
content: "❌ ";
|
||||
text-shadow: 1px 1px 1px #000;
|
||||
}
|
||||
.md-contents .markdown-alert-success:not(.md-override) {
|
||||
border: 1px solid #00FF00;
|
||||
box-shadow: 0 0 7px #00FF00;
|
||||
}
|
||||
.md-contents .markdown-alert-success .markdown-alert-title:not(.md-override):before {
|
||||
content: "✅ ";
|
||||
text-shadow: 1px 1px 1px #000;
|
||||
}
|
||||
.md-contents .markdown-alert-info:not(.md-override) {
|
||||
border: 1px solid #00FFFF;
|
||||
box-shadow: 0 0 7px #00FFFF;
|
||||
}
|
||||
.md-contents .markdown-alert-info .markdown-alert-title:not(.md-override):before {
|
||||
content: "ℹ️ ";
|
||||
text-shadow: 1px 1px 1px #000;
|
||||
}
|
||||
.md-contents .markdown-alert-important:not(.md-override) {
|
||||
border: 1px solid #FF00FF;
|
||||
box-shadow: 0 0 7px #FF00FF;
|
||||
}
|
||||
.md-contents .markdown-alert-important .markdown-alert-title:not(.md-override):before {
|
||||
content: "❗ ";
|
||||
text-shadow: 1px 1px 1px #000;
|
||||
}
|
||||
.md-contents .markdown-alert-caution:not(.md-override) {
|
||||
border: 1px solid #FFFF00;
|
||||
box-shadow: 0 0 7px #FFFF00;
|
||||
}
|
||||
.md-contents .markdown-alert-caution .markdown-alert-title:not(.md-override):before {
|
||||
content: "⚠️ ";
|
||||
text-shadow: 1px 1px 1px #000;
|
||||
}
|
||||
.md-contents .markdown-alert-note:not(.md-override) {
|
||||
border: 1px solid #0000FF;
|
||||
box-shadow: 0 0 7px #0000FF;
|
||||
}
|
||||
.md-contents .markdown-alert-note .markdown-alert-title:not(.md-override):before {
|
||||
content: "📝 ";
|
||||
text-shadow: 1px 1px 1px #000;
|
||||
}
|
||||
.md-contents .markdown-alert-tip:not(.md-override) {
|
||||
border: 1px solid #00FF00;
|
||||
box-shadow: 0 0 7px #00FF00;
|
||||
}
|
||||
.md-contents .markdown-alert-tip .markdown-alert-title:not(.md-override):before {
|
||||
content: "💡 ";
|
||||
text-shadow: 1px 1px 1px #000;
|
||||
}
|
||||
.md-contents .markdown-alert-question:not(.md-override) {
|
||||
border: 1px solid #ccc;
|
||||
box-shadow: 0 0 7px #ccc;
|
||||
}
|
||||
.md-contents .markdown-alert-question .markdown-alert-title:not(.md-override):before {
|
||||
content: "❓ ";
|
||||
text-shadow: 1px 1px 1px #000;
|
||||
}
|
||||
.md-contents .markdown-alert-quote:not(.md-override) {
|
||||
border: 1px dashed #ccc;
|
||||
box-shadow: 0 0 7px #ccc;
|
||||
}
|
||||
.md-contents .markdown-alert-quote .markdown-alert-title:not(.md-override):before {
|
||||
content: "❝ ";
|
||||
text-shadow: 1px 1px 1px #000;
|
||||
}
|
||||
.md-contents .markdown-alert-deprecated:not(.md-override) {
|
||||
border: 1px solid indigo;
|
||||
box-shadow: 0 0 7px indigo;
|
||||
}
|
||||
.md-contents .markdown-alert-deprecated .markdown-alert-title:not(.md-override):before {
|
||||
content: "🚫 ";
|
||||
text-shadow: 1px 1px 1px #000;
|
||||
}
|
||||
.md-contents .markdown-alert-example:not(.md-override) {
|
||||
border: 1px solid #ccc;
|
||||
box-shadow: 0 0 7px #ccc;
|
||||
}
|
||||
.md-contents .markdown-alert-example .markdown-alert-title:not(.md-override):before {
|
||||
content: "💡 ";
|
||||
text-shadow: 1px 1px 1px #000;
|
||||
}
|
||||
.md-contents .markdown-alert-todo:not(.md-override) {
|
||||
border: 1px solid skyblue;
|
||||
box-shadow: 0 0 7px skyblue;
|
||||
}
|
||||
.md-contents .markdown-alert-todo .markdown-alert-title:not(.md-override):before {
|
||||
content: "📝 ";
|
||||
text-shadow: 1px 1px 1px #000;
|
||||
}
|
||||
.md-contents .markdown-alert-done:not(.md-override) {
|
||||
border: 1px solid #00FF00;
|
||||
box-shadow: 0 0 7px #00FF00;
|
||||
}
|
||||
.md-contents .markdown-alert-done .markdown-alert-title:not(.md-override):before {
|
||||
content: "✅ ";
|
||||
text-shadow: 1px 1px 1px #000;
|
||||
}
|
||||
|
||||
/* Footnotes, ensure they are by default white with no transition if they have no href */
|
||||
.md-contents .footnote-anchor:not([href]) {
|
||||
color: white;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
|
||||
/* Apply margin to code blocks */
|
||||
.md-contents pre:not(.md-override) {
|
||||
margin: 1rem 0;
|
||||
|
|
@ -99,4 +232,73 @@ watch(() => props.text, (newVal) => {
|
|||
transition: background-color 0.5s;
|
||||
}
|
||||
|
||||
/* iframes get a border and a shadow */
|
||||
.md-contents iframe:not(.md-override) {
|
||||
@apply border-2 border-purple-600 rounded-lg;
|
||||
box-shadow: 0 0 7px #A020F0;
|
||||
}
|
||||
|
||||
/* Identify if the iframe links to a YouTube video - If so, red border */
|
||||
.md-contents iframe[src*="youtube.com"]:not(.md-override) {
|
||||
@apply border-2 border-red-600;
|
||||
box-shadow: 0 0 7px red;
|
||||
}
|
||||
|
||||
/* Identify if the iframe links to a Twitch video - If so, purple border */
|
||||
.md-contents iframe[src*="twitch.tv"]:not(.md-override) {
|
||||
@apply border-2 border-purple-600;
|
||||
box-shadow: 0 0 7px #A020F0;
|
||||
}
|
||||
|
||||
/* Identify if the iframe links to a Spotify playlist - If so, green border */
|
||||
.md-contents iframe[src*="spotify.com"]:not(.md-override) {
|
||||
@apply border-2 border-green-600 rounded-xl;
|
||||
box-shadow: 0 0 7px green;
|
||||
}
|
||||
|
||||
/* Identify if the iframe links to a SoundCloud track - If so, orange border */
|
||||
.md-contents iframe[src*="soundcloud.com"]:not(.md-override) {
|
||||
@apply border-2 border-orange-600;
|
||||
box-shadow: 0 0 7px orange;
|
||||
}
|
||||
|
||||
/* Identify if the iframe links to a Bandcamp track - If so, blue border */
|
||||
.md-contents iframe[src*="bandcamp.com"]:not(.md-override) {
|
||||
@apply border-2 border-blue-600;
|
||||
box-shadow: 0 0 7px blue;
|
||||
}
|
||||
|
||||
/* Identify if the iframe links to a GitHub Gist - If so, gray border */
|
||||
.md-contents iframe[src*="gist.github.com"]:not(.md-override) {
|
||||
@apply border-2 border-gray-600;
|
||||
box-shadow: 0 0 7px gray;
|
||||
}
|
||||
|
||||
/* And if it links to Wikipedia, the free online encyclopedia, give it a white border */
|
||||
.md-contents iframe[src*="wikipedia.org"]:not(.md-override) {
|
||||
@apply border-2 border-white;
|
||||
box-shadow: 0 0 7px white;
|
||||
}
|
||||
|
||||
/* If the iframe links to a Google Maps location */
|
||||
.md-contents iframe[src*="google.com/maps"]:not(.md-override) {
|
||||
border-left: 2px solid #4285F4;
|
||||
border-right: 2px solid #0F9D58;
|
||||
border-top: 2px solid #F4B400;
|
||||
border-bottom: 2px solid #DB4437;
|
||||
box-shadow: 0 0 7px #4285F4;
|
||||
}
|
||||
|
||||
/* Redo the audio element styling */
|
||||
.md-contents audio:not(.md-override) {
|
||||
@apply border-2 border-purple-600 rounded-lg;
|
||||
box-shadow: 0 0 7px #A020F0;
|
||||
}
|
||||
|
||||
/* Images get a border and a shadow */
|
||||
.md-contents img:not(.md-override) {
|
||||
@apply border-2 border-purple-600;
|
||||
box-shadow: 0 0 7px #A020F0;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -2,6 +2,7 @@
|
|||
export default defineNuxtConfig({
|
||||
compatibilityDate: '2024-11-01',
|
||||
ssr: false,
|
||||
|
||||
postcss: {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
|
|
|
|||
15
package.json
15
package.json
|
|
@ -10,13 +10,28 @@
|
|||
"postinstall": "rm assets/blog_list.json && sh utils/track_posts.sh >> assets/blog_list.json &&nuxt prepare"
|
||||
},
|
||||
"dependencies": {
|
||||
"@mdit/plugin-alert": "^0.14.0",
|
||||
"@mdit/plugin-align": "^0.14.0",
|
||||
"@mdit/plugin-figure": "^0.14.0",
|
||||
"@mdit/plugin-footnote": "^0.14.0",
|
||||
"@mdit/plugin-mark": "^0.14.0",
|
||||
"@mdit/plugin-tab": "^0.14.0",
|
||||
"@mdit/plugin-tasklist": "^0.14.0",
|
||||
"@mdit/plugin-tex": "^0.14.0",
|
||||
"@popperjs/core": "^2.11.8",
|
||||
"@tsparticles/slim": "^3.7.1",
|
||||
"@types/markdown-it": "^14.1.2",
|
||||
"css-loader": "^7.1.2",
|
||||
"markdown-it-checkbox": "^1.1.0",
|
||||
"mathpix-markdown-it": "^2.0.9",
|
||||
"nuxt": "^3.14.1592",
|
||||
"ofetch": "^1.4.1",
|
||||
"postcss-loader": "^8.1.1",
|
||||
"tex-to-svg": "^0.2.0",
|
||||
"texsvg": "^2.2.2",
|
||||
"tsparticles": "^3.7.1",
|
||||
"vue": "latest",
|
||||
"vue-loader": "^17.4.2",
|
||||
"vue-router": "latest",
|
||||
"@tsparticles/engine": "^3.5.0",
|
||||
"@tsparticles/vue3": "^3.0.1",
|
||||
|
|
|
|||
|
|
@ -105,7 +105,15 @@ fn main() {
|
|||
|
||||
This is a sentence with a footnote[^1].
|
||||
|
||||
[^1]: This is the footnote.
|
||||
### Superscript and Subscript
|
||||
|
||||
This is a superscript: x<sup>2</sup>.
|
||||
|
||||
This is a subscript: H<sub>2</sub>O.
|
||||
|
||||
### Marker
|
||||
|
||||
This is a highlight: ==highlighted text==.
|
||||
|
||||
### Math
|
||||
|
||||
|
|
@ -124,18 +132,74 @@ $$
|
|||
- [x] Checked
|
||||
- [ ] Unchecked
|
||||
|
||||
### Videos
|
||||
### Alerts
|
||||
|
||||
> [!warning]
|
||||
> This is a warning alert.
|
||||
|
||||
> [!info]
|
||||
> This is an info alert.
|
||||
|
||||
> [!danger]
|
||||
> This is a danger alert.
|
||||
|
||||
> [!success]
|
||||
> This is a success alert.
|
||||
|
||||
> [!important]
|
||||
> This is an important alert.
|
||||
|
||||
> [!caution]
|
||||
> This is a caution alert.
|
||||
|
||||
> [!note]
|
||||
> This is a note alert.
|
||||
|
||||
> [!tip]
|
||||
> This is a tip alert.
|
||||
|
||||
> [!question]
|
||||
> This is a question alert.
|
||||
|
||||
> [!quote]
|
||||
> This is a quote alert.
|
||||
|
||||
> [!deprecated]
|
||||
> This is a deprecated alert.
|
||||
|
||||
> [!example]
|
||||
> This is an example alert.
|
||||
|
||||
> [!todo]
|
||||
> This is a todo alert.
|
||||
|
||||
> [!done]
|
||||
> This is a done alert.
|
||||
|
||||
### Iframes
|
||||
|
||||
<!-- The towwwn inside meeeeee :3 -->
|
||||
|
||||
The colorations are supposed to automagically change based on what you're linking to.
|
||||
|
||||
YouTube:
|
||||
|
||||
<iframe width="560" height="315" src="https://www.youtube.com/embed/69VV0pH57XE" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
|
||||
|
||||
Spotify:
|
||||
|
||||
<iframe src="https://open.spotify.com/embed/track/0R4EcD2e5m9wsMmWVVbBOc" width="300" height="380" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>
|
||||
|
||||
Maps:
|
||||
|
||||
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3153.0000000000005!2d-122.0841926846827!3d37.42199997981999!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808f7e3f0b0b0f7d%3A0x7d9b1f7f7f7f7f7f!2sGoogleplex!5e0!3m2!1sen!2sus!4v1630483660004!5m2!1sen!2sus" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
|
||||
|
||||
### Audio
|
||||
|
||||
<!-- Bach's Prelude and Fugue in A minor -->
|
||||
Bach's Prelude and Fugue in A minor:
|
||||
|
||||
<audio controls>
|
||||
<source src="https://en.wikipedia.org/wiki/File:BWV_543-prelude.ogg" type="audio/ogg">
|
||||
<source src="/files/BWV_543-prelude.ogg" type="audio/ogg">
|
||||
Your browser does not support the audio element.
|
||||
</audio>
|
||||
|
||||
|
|
@ -159,9 +223,12 @@ $$
|
|||
- [Horizontal Rules](#horizontal-rules)
|
||||
- [Emphasis](#emphasis)
|
||||
- [Footnotes](#footnotes)
|
||||
- [Superscript and Subscript](#superscript-and-subscript)
|
||||
- [Marker](#marker)
|
||||
- [Math](#math)
|
||||
- [Checkboxes](#checkboxes)
|
||||
- [Videos](#videos)
|
||||
- [Alerts](#alerts)
|
||||
- [Iframes](#iframes)
|
||||
- [Audio](#audio)
|
||||
- [Tables of Contents](#tables-of-contents)
|
||||
- [Embedded CSS](#embedded-css)
|
||||
|
|
@ -209,10 +276,11 @@ $$
|
|||
|
||||
### Embedded LaTeX
|
||||
|
||||
Euler’s identity $e^{i\pi}+1=0$ is a beautiful formula in $\mathbb{R}^2$.
|
||||
|
||||
$$
|
||||
|
||||
\int_{-\infty}^{\infty} e^{-x^2} \, dx = \sqrt{\pi}
|
||||
|
||||
\frac {\partial^r} {\partial \omega^r} \left(\frac {y^{\omega}} {\omega}\right)
|
||||
= \left(\frac {y^{\omega}} {\omega}\right) \left\{(\log y)^r + \sum_{i=1}^r \frac {(-1)^ Ir \cdots (r-i+1) (\log y)^{ri}} {\omega^i} \right\}
|
||||
$$
|
||||
|
||||
### Interactive Scripting
|
||||
|
|
@ -241,3 +309,5 @@ And this one uses a `<script>` tag to do the same thing:
|
|||
This is the end of the test post. I hope everything looks good!
|
||||
|
||||
- TheFelidae
|
||||
|
||||
[^1]: This is the footnote.
|
||||
BIN
public/files/BWV_543-prelude.ogg
Normal file
BIN
public/files/BWV_543-prelude.ogg
Normal file
Binary file not shown.
Loading…
Add table
Reference in a new issue