💠 Lorica Blog

Testing Mathematical Formulas in Markdown

Lorica Blog — Sat, 31 May 2025 00:00:00 GMT

This document serves as a test for rendering mathematical formulas in Markdown using $$ delimiters.

Basic Algebra

Let’s start with some fundamental algebraic expressions.

The quadratic formula is given by: $x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}$

A simple linear equation: $y = mx + c$

Expansion of a binomial square: $(a+b)^2 = a^2 + 2ab + b^2$

Calculus

Here are some common expressions from calculus.

The limit definition of a derivative: $f'(x) = \lim_{h \to 0} \frac{f(x+h) - f(x)}{h}$

A definite integral: $\int_{a}^{b} f(x) dx$

The Taylor series expansion of $e^x$ around $x=0$ : $e^x = \sum_{n=0}^{\infty} \frac{x^n}{n!} = 1 + x + \frac{x^2}{2!} + \frac{x^3}{3!} + \cdots$

Trigonometry

Some basic trigonometric identities.

Pythagorean identity: $\sin^2\theta + \cos^2\theta = 1$

Angle addition formula for sine: $\sin(\alpha + \beta) = \sin\alpha\cos\beta + \cos\alpha\sin\beta$

Euler’s formula: $e^{i\theta} = \cos\theta + i\sin\theta$

Statistics and Probability

Formulas commonly used in statistics and probability.

The formula for the mean ( $\mu$ ) of a set of $n$ numbers $x_1, x_2, \ldots, x_n$ : $\mu = \frac{1}{n} \sum_{i=1}^{n} x_i$

The probability density function of a normal distribution: $f(x | \mu, \sigma^2) = \frac{1}{\sqrt{2\pi\sigma^2}} e^{-\frac{(x-\mu)^2}{2\sigma^2}}$

Bayes’ theorem: $P(A|B) = \frac{P(B|A)P(A)}{P(B)}$

Linear Algebra

Examples from linear algebra.

A 2x2 matrix: $A = \begin{pmatrix} a & b \\ c & d \end{pmatrix}$

The determinant of a 2x2 matrix: $\det(A) = ad - bc$

Matrix multiplication of two matrices A and B: $C = AB$

Physics

A couple of well-known physics equations.

Einstein’s mass-energy equivalence: $E = mc^2$

Newton’s second law of motion: $F = ma$

This should provide a good test of how various mathematical formulas are rendered.

This rendering was automatically generated by Frosti Feed and may have formatting issues. For the best experience, please visit: https://lorica01.netlify.app/blog/mathematics-examples/

Adding Comment Systems to Frosti

Lorica Blog — Tue, 15 Apr 2025 00:00:00 GMT

Introduction

One of the essential features of any blog is the ability for readers to engage with your content through comments. While Frosti provides an excellent foundation for your Astro-based blog, adding a comment system requires a few additional steps. This guide will walk you through integrating the Waline comment system into your Frosti blog.

Static sites like those built with Astro don’t have built-in comment systems since they lack server-side processing. However, we can use third-party comment services that handle the backend for us, while we integrate their frontend components into our site.

Creating Comment Components in Astro

Before diving into a specific comment system, let’s understand how to create and use components in Astro. We’ll create a reusable component that can be easily added to any page.

Component Structure

We’ll create our comment component in the src/components/comments directory. First, let’s ensure this directory exists:

1
mkdir -p src/components/comments

Integrating Waline

Waline↗ is a simple, safe, and feature-rich comment system with backend and frontend separation. It is highly customizable and easy to set up.

Step 1: Set Up Waline Backend

Before adding Waline to your site, you need to set up the backend:

Create a LeanCloud application to store your comments.
Deploy the Waline server to Vercel or another hosting platform.

Follow the official Waline guide↗ to set up your backend service. After deploying, you’ll get a server URL that you will need for the frontend component.

Step 2: Create the Waline Component

Let’s create a reusable Waline component:

1
touch src/components/comments/Waline.astro

Add the following code to this component:

1
---
2
interface Props {
3
  serverURL: string;
4
  lang?: string;
5
  dark?: string;
6
  emoji?: string[];
7
  meta?: string[];
8
  requiredMeta?: string[];
9
  reaction?: boolean;
10
  pageview?: boolean;
11
}
12

13
const {
14
  serverURL,
15
  lang = "en",
16
  dark = "html[data-theme-type='dark']",
17
  emoji = ["https://unpkg.com/@waline/emojis@1.1.0/weibo", "https://unpkg.com/@waline/emojis@1.1.0/bilibili"],
18
  meta = ["nick", "mail", "link"],
19
  requiredMeta = [],
20
  reaction = false,
21
  pageview = false,
22
} = Astro.props;
23
---
24

25
<div id="waline-container"></div>
26

27
<link rel="stylesheet" href="https://unpkg.com/@waline/client@v3/dist/waline.css" />
28

29
<script
30
  type="module"
31
  define:vars={{
32
    serverURL,
33
    lang,
34
    dark,
35
    emoji,
36
    meta,
37
    requiredMeta,
38
    reaction,
39
    pageview,
40
  }}
41
>
42
  import { init } from "https://unpkg.com/@waline/client@v3/dist/waline.js";
43

44
  async function initWaline() {
45
    const container = document.querySelector("#waline-container");
46
    if (!container) return;
47

48
    init({
49
      el: "#waline-container",
50
      serverURL,
51
      path: location.pathname,
52
      lang,
53
      dark,
54
      emoji,
55
      meta,
56
      requiredMeta,
57
      reaction,
58
      pageview,
59
    });
60
  }
61

62
  document.addEventListener("astro:page-load", () => {
63
    initWaline();
64
  });
65

66
  if (document.readyState !== "loading") {
67
    initWaline();
68
  } else {
69
    document.addEventListener("DOMContentLoaded", initWaline);
70
  }
71
</script>
72

73
<style>
74
  #waline-container {
75
    margin-top: 2rem;
76
    margin-bottom: 2rem;
77
  }
78
</style>

Step 3: Using the Waline Component

You can now use the Waline component in your Astro pages or layouts. Here’s how to add it to your blog post template:

1
---
2
// In your blog post layout file
3
import Waline from "../../components/comments/Waline.astro";
4
// Other imports and frontmatter...
5
---
6

7
<!-- Your blog post content -->
8
<article>
9
  <slot />
10
</article>
11

12
<!-- Add the comment section -->
13
<section class="comments">
14
  <h2>Comments</h2>
15
  <Waline serverURL="https://your-waline-server.vercel.app" />
16
</section>

Replace "https://your-waline-server.vercel.app" with your actual Waline server URL.

Troubleshooting

Common Issues

Comments not displaying: Make sure your serverURL is correctly set and accessible.
CSS issues: Ensure that the Waline stylesheet is properly loaded.
Deployment issues: If your server is on Vercel, check the environment variables and deployment logs.

This rendering was automatically generated by Frosti Feed and may have formatting issues. For the best experience, please visit: https://lorica01.netlify.app/blog/adding-comment-systems/

Using mdx in Frosti

Lorica Blog — Fri, 12 Jul 2024 00:00:00 GMT

No content available.

This rendering was automatically generated by Frosti Feed and may have formatting issues. For the best experience, please visit: https://lorica01.netlify.app/blog/frosti-mdx/

Markdown Style Guide

Lorica Blog — Mon, 01 Jul 2024 00:00:00 GMT

Here is a sample of some basic Markdown syntax that can be used when writing Markdown content in Astro.

Headings

The following HTML <h1>—<h6> elements represent six levels of section headings. <h1> is the highest section level while <h6> is the lowest.

H2

H3

H4

H5

H6

Paragraph

Xerum, quo qui aut unt expliquam qui dolut labo. Aque venitatiusda cum, voluptionse latur sitiae dolessi aut parist aut dollo enim qui voluptate ma dolestendit peritin re plis aut quas inctum laceat est volestemque commosa as cus endigna tectur, offic to cor sequas etum rerum idem sintibus eiur? Quianimin porecus evelectur, cum que nis nust voloribus ratem aut omnimi, sitatur? Quiatem. Nam, omnis sum am facea corem alique molestrunt et eos evelece arcillit ut aut eos eos nus, sin conecerem erum fuga. Ri oditatquam, ad quibus unda veliamenimin cusam et facea ipsamus es exerum sitate dolores editium rerore eost, temped molorro ratiae volorro te reribus dolorer sperchicium faceata tiustia prat.

Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sapicia is sinveli squiatum, core et que aut hariosam ex eat.

Images

Syntax

1
![Alt text](./full/or/relative/path/of/image)

Output

Blockquotes

The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a footer or cite element, and optionally with in-line changes such as annotations and abbreviations.

Blockquote without attribution

Syntax

1
> Tiam, ad mint andaepu dandae nostion secatur sequo quae.
2
> **Note** that you can use _Markdown syntax_ within a blockquote.

Output

Tiam, ad mint andaepu dandae nostion secatur sequo quae. Note that you can use Markdown syntax within a blockquote.

Blockquote with attribution

Syntax

1
> Don't communicate by sharing memory, share memory by communicating.<br>
2
> — <cite>Rob Pike[^1]</cite>

Output

Don’t communicate by sharing memory, share memory by communicating.
— Rob Pike¹

Tables

Syntax

1
| Italics   | Bold     | Code   |
2
| --------- | -------- | ------ |
3
| _italics_ | **bold** | `code` |

Output

Italics	Bold	Code
italics	bold	`code`

Code Blocks

Syntax

we can use 3 backticks ``` in new line and write snippet and close with 3 backticks on new line and to highlight language specific syntac, write one word of language name after first 3 backticks, for eg. html, javascript, css, markdown, typescript, txt, bash

1
```cpp
2
#include <bits/stdc++.h>
3
using namespace std;
4
const int N = 1e5 + 5;
5
int n, k, a[N];
6
long long ans;
7
vector<int> v[N];
8
int main()
9
{
10
    scanf("%d%d", &n, &k);
11
    for (int i = 1; i <= n; i++)
12
    {
13
        scanf("%d", &a[i]);
14
        v[i % k].push_back(a[i]);
15
    }
16
    for (int i = 0; i < k; i++)
17
        sort(v[i].rbegin(), v[i].rend());
18
    for (int i = 0; i < k; i++)
19
    {
20
        for (int j = 0; j + 1 < v[i].size(); j += 2)
21
        {
22
            ans += v[i][j] + v[i][j + 1];
23
        }
24
    }
25
    printf("%lld\n", ans);
26
    return 0;
27
}
28
```

Output

1
#include <bits/stdc++.h>
2
using namespace std;
3
const int N = 1e5 + 5;
4
int n, k, a[N];
5
long long ans;
6
vector<int> v[N];
7
int main()
8
{
9
    scanf("%d%d", &n, &k);
10
    for (int i = 1; i <= n; i++)
11
    {
12
        scanf("%d", &a[i]);
13
        v[i % k].push_back(a[i]);
14
    }
15
    for (int i = 0; i < k; i++)
16
        sort(v[i].rbegin(), v[i].rend());
17
    for (int i = 0; i < k; i++)
18
    {
19
        for (int j = 0; j + 1 < v[i].size(); j += 2)
20
        {
21
            ans += v[i][j] + v[i][j + 1];
22
        }
23
    }
24
    printf("%lld\n", ans);
25
    return 0;
26
}

List Types

Ordered List

Syntax

1
1. First item
2
2. Second item
3
3. Third item

Output

First item
Second item
Third item

Unordered List

Syntax

1
- List item
2
- Another item
3
- And another item

Output

List item
Another item
And another item

Nested list

Syntax

1
- Fruit
2
  - Apple
3
  - Orange
4
  - Banana
5
- Dairy
6
  - Milk
7
  - Cheese

Output

Fruit
- Apple
- Orange
- Banana
Dairy
- Milk
- Cheese

Other Elements

Syntax

1
<abbr title="Graphics Interchange Format">GIF</abbr> is a bitmap image format.
2

3
H<sub>2</sub>O
4

5
X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup>
6

7
Press <kbd>CTRL</kbd>+<kbd>ALT</kbd>+<kbd>Delete</kbd> to end the session.
8

9
Most <mark>salamanders</mark> are nocturnal, and hunt for insects, worms, and other small creatures.

Output

GIF is a bitmap image format.

H₂O

Xⁿ + Yⁿ = Zⁿ

Press CTRL+ALT+Delete to end the session.

Most salamanders are nocturnal, and hunt for insects, worms, and other small creatures.

The above quote is excerpted from Rob Pike’s talk↗ during Gopherfest, November 18, 2015. ↩

This rendering was automatically generated by Frosti Feed and may have formatting issues. For the best experience, please visit: https://lorica01.netlify.app/blog/markdown-style-guide/

Using MDX

Lorica Blog — Sat, 02 Jul 2022 00:00:00 GMT

No content available.

This rendering was automatically generated by Frosti Feed and may have formatting issues. For the best experience, please visit: https://lorica01.netlify.app/blog/using-mdx/

💠 Lorica Blog

Testing Mathematical Formulas in Markdown

Basic Algebra

Calculus

Trigonometry

Statistics and Probability

Linear Algebra

Physics

Adding Comment Systems to Frosti

Introduction

Creating Comment Components in Astro

Component Structure

Integrating Waline

Step 1: Set Up Waline Backend

Step 2: Create the Waline Component

Step 3: Using the Waline Component

Troubleshooting

Common Issues

Using mdx in Frosti

Markdown Style Guide

Headings

H2

H3

H4

H5

H6

Paragraph

Images

Syntax

Output

Blockquotes

Blockquote without attribution

Syntax

Output

Blockquote with attribution

Syntax

Output

Tables

Syntax

Output

Code Blocks

Syntax

List Types

Ordered List

Syntax

Output

Unordered List

Syntax

Output

Nested list

Syntax

Output

Other Elements

Syntax

Output

Footnotes

Using MDX