<?xml version="1.0" encoding="UTF-8"?><rss version="2.0" xmlns:content="http://purl.org/rss/1.0/modules/content/"><channel><title>Shiroki(SkyMax)</title><description>BLOG</description><link>https://fuwari.vercel.app/</link><language>zh_CN</language><item><title>如何用C++编写Minecraft!?</title><link>https://fuwari.vercel.app/posts/how-to-make-2dversion-and-3dversion-minecraft-incpp/</link><guid isPermaLink="true">https://fuwari.vercel.app/posts/how-to-make-2dversion-and-3dversion-minecraft-incpp/</guid><description>使用C++分别编写2D版与3D版的Minecraft</description><pubDate>Mon, 18 May 2026 00:00:00 GMT</pubDate><content:encoded>&lt;h1&gt;前言&lt;/h1&gt;
&lt;h2&gt;作者的话&lt;/h2&gt;
&lt;p&gt;&lt;code&gt;*游戏版权:原&quot;Minecraft&quot;由&quot;©Mojang AB所开发&quot;，本次内容只是为MC爱好者的开源项目，由Dev-C++开源，与&quot;Minecraft&quot;以及&quot;我的世界&quot;没有从属关系，请尊重原版游戏！&lt;/code&gt;&lt;/p&gt;
&lt;p&gt;今天我将展示两种分别使用&lt;strong&gt;Dev-C++&lt;strong&gt;做的&lt;/strong&gt;2D&lt;/strong&gt;版与&lt;strong&gt;3D&lt;/strong&gt;版的Minecraft
&lt;code&gt;本文章来自博主 SkyMax(スキマックス) 编写 版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明&lt;/code&gt;&lt;/p&gt;
&lt;h1&gt;正文&lt;/h1&gt;
&lt;h2&gt;1. 功能介绍&lt;/h2&gt;
&lt;p&gt;1.1 基本按键&lt;/p&gt;
&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;移动&lt;/th&gt;
&lt;th&gt;按键&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;前&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;W&lt;/strong&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;后&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;S&lt;/strong&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;左&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;A&lt;/strong&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;右&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;D&lt;/strong&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;打开背包(物品栏)&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;E&lt;/strong&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;跳跃&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;Space&lt;/strong&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;蹲下&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;Shift&lt;/strong&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;退出游戏&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;X&lt;/strong&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;p&gt;:::tip
因为博主编程太菜了，有些功能不全面，请谅解...
在公布源代码之前，大家需要做一些功能准备，但是不用担心，跟着我一步一步来。
:::&lt;/p&gt;
&lt;h1&gt;2. Minecraft 3D&lt;/h1&gt;
&lt;p&gt;准备工作&lt;/p&gt;
&lt;p&gt;首先要准备的就是字体&lt;/p&gt;
&lt;p&gt;大家点击这个链接就可以进行下载、安装了&lt;/p&gt;
&lt;p&gt;字体下载 https://web.mc.js.cool/texture/mc-font.ttf &lt;strong&gt;(已失效)&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;大家像这样新建文件夹,一会儿会在里面编辑一些文件。&lt;/p&gt;
&lt;p&gt;新建好以后，&lt;/p&gt;
&lt;p&gt;我会展示自编头文件，也就是noise.h和math.h，后面我们需要用到。
头文件&lt;/p&gt;
&lt;h3&gt;noise.h&lt;/h3&gt;
&lt;pre&gt;&lt;code&gt;    float persistence = 0.7;
    int Number_Of_Octaves = 2;
     
    double Noise(int x,int y)    
    {
    	int n = x + y * 57;  
    	n = (n&amp;lt;&amp;lt;13) ^ n;
    	return ( 1.0 - ( (n * (n * n * 15731 + 789221) + 1376312589) &amp;amp; 0x7fffffff) / 1073741824.0);
    }
    double SmoothedNoise(int x, int y)   
    {
    	double corners = ( Noise(x-1, y-1)+Noise(x+1, y-1)+Noise(x-1, y+1)+Noise(x+1, y+1) ) / 16;
    	double sides = ( Noise(x-1, y) +Noise(x+1, y) +Noise(x, y-1) +Noise(x, y+1) ) / 8;
    	double center = Noise(x, y) / 4;
    	return corners + sides + center;
    }
    double Cosine_Interpolate(double a,double b, double x)  
    {
    	double ft = x * 3.1415927;
    	double f = (1 - cos(ft)) * 0.5;
    	return a*(1-f) + b*f;
    }
    double InterpolatedNoise(float x,float y)   
    {
    	int integer_X = int(x);
    	float  fractional_X = x - integer_X;
    	int integer_Y = int(y);
    	float fractional_Y = y - integer_Y;
    	double v1 = SmoothedNoise(integer_X, integer_Y);
    	double v2 = SmoothedNoise(integer_X + 1, integer_Y);
    	double v3 = SmoothedNoise(integer_X, integer_Y + 1);
    	double v4 = SmoothedNoise(integer_X + 1, integer_Y + 1);
    	double i1 = Cosine_Interpolate(v1, v2, fractional_X);
    	double i2 = Cosine_Interpolate(v3, v4, fractional_X);
    	return Cosine_Interpolate(i1, i2, fractional_Y);
    }
    double noise(float x,float y=0)
    {
    	double total = 0;
    	double p = persistence;
    	int n = Number_Of_Octaves;
    	for(int i=0; i&amp;lt;n; i++)
    	{
    		double frequency = pow(2,i);
    		double amplitude = pow(p,i);
    		total = total + InterpolatedNoise(x * frequency, y * frequency) * amplitude;
    	}
    	
    	return total;
    }
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;:::tip
各位看到有报错可以不用管(MinGW / GCC日常,Visual Studio应该不会有报错)
:::&lt;/p&gt;
&lt;h3&gt;math.h&lt;/h3&gt;
&lt;pre&gt;&lt;code&gt;    #include&amp;lt;bits/stdc++.h&amp;gt;
    using namespace std;
    struct Vec2i
    {
    	Vec2i() : x(0), y(0) {}
    	Vec2i(int X, int Y): x(X), y(Y) {};
    	Vec2i operator - (Vec2i b)
    	{
    		return Vec2i(x - b.x, y - b.y);
    	}
    	int x, y;
    };
    struct Vec3i
    {
    	int x, y, z;
    	Vec3i(int X, int Y, int Z): x(X), y(Y), z(Z) {};
    	Vec3i() : x(0), y(0), z(0) {};
    	bool operator&amp;lt;(const Vec3i b) const
    	{
    		return x == b.x ? (y == b.y ? z &amp;lt; b.z : y &amp;lt; b.y) : x &amp;lt; b.x;
    	}
    	Vec3i operator * (int r)
    	{
    		return Vec3i(x * r, y * r, z * r);
    	}
    	Vec3i operator + (Vec3i v)
    	{
    		return Vec3i(x + v.x, y + v.y, z + v.z);
    	}
    	bool operator==(const Vec3i b) const
    	{
    		return x == b.x &amp;amp;&amp;amp; y == b.y &amp;amp;&amp;amp; z == b.z;
    	}
    };
    Vec2i findIntersection(Vec2i a, Vec2i b, Vec2i c, Vec2i d)
    {
    	float x1 = a.x, y1 = a.y;
    	float x2 = b.x, y2 = b.y;
    	float x3 = c.x, y3 = c.y;
    	float x4 = d.x, y4 = d.y;
    	float x, y;
    	float den = (x1 - x2) * (y3 - y4) - (y1 - y2) * (x3 - x4);
    	if (den == 0)return Vec2i(0.25 * (x1 + x2 + x3 + x4), 0.25 * (y1 + y2 + y3 + y4));
    	x = ((x1 * y2 - y1 * x2) * (x3 - x4) - (x1 - x2) * (x3 * y4 - y3 * x4)) / den;
    	y = ((x1 * y2 - y1 * x2) * (y3 - y4) - (y1 - y2) * (x3 * y4 - y3 * x4)) / den;
    	return Vec2i(x, y);
    }
    struct Vec3f
    {
    	Vec3f() : x(0), y(0), z(0) {}
    	Vec3f(float xx, float yy, float zz) : x(xx), y(yy), z(zz) {}
    	Vec3f operator + (Vec3f v)
    	{
    		return Vec3f(x + v.x, y + v.y, z + v.z);
    	}
    	Vec3f operator - (Vec3f v)
    	{
    		return Vec3f(x - v.x, y - v.y, z - v.z);
    	}
    	Vec3f operator * (float r)
    	{
    		return Vec3f(x * r, y * r, z * r);
    	}
    	float lenth()
    	{
    		return sqrt(x * x + y * y + z * z);
    	}
    	bool operator&amp;lt;(const Vec3f b) const
    	{
    		return x == b.x ? (y == b.y ? z &amp;lt; b.z : y &amp;lt; b.y) : x &amp;lt; b.x;
    	}
    	void rotate_x(float R)
    	{
    		float new_y = y * cos(R) - z * sin(R);
    		float new_z = y * sin(R) + z * cos(R);
    		y = new_y;
    		z = new_z;
    	}
    	void rotate_y(float R)
    	{
    		float new_x = x * cos(R) + z * sin(R);
    		float new_z = -x * sin(R) + z * cos(R);
    		x = new_x;
    		z = new_z;
    	}
    	const float&amp;amp; operator [] (uint8_t i) const
    	{
    		return (&amp;amp;x)[i];
    	}
    	Vec3f&amp;amp; normalize()
    	{
    		float factor = 1 / lenth() ;
    		x *= factor, y *= factor, z *= factor;
    		return *this;
    	}
    	float x, y, z;
    };
    struct Matrix44
    {
    	float x[4][4] = {
      {1, 0, 0, 0}, {0, 1, 0, 0}, {0, 0, 1, 0}, {0, 0, 0, 1}};
    	Matrix44() {}
    	int rad = rand() % 2;
    	Matrix44 (float a, float b, float c, float d, float e, float f, float g, float h, float i, float j, float k, float l, float m, float n, float o, float p)
    	{
    		x[0][0] = a;
    		x[0][1] = b;
    		x[0][2] = c;
    		x[0][3] = d;
    		x[1][0] = e;
    		x[1][1] = f;
    		x[1][2] = g;
    		x[1][3] = h;
    		x[2][0] = i;
    		x[2][1] = j;
    		x[2][2] = k;
    		x[2][3] = l;
    		x[3][0] = m;
    		x[3][1] = n;
    		x[3][2] = o;
    		x[3][3] = p;
    	}
    	const float* operator [] (uint8_t i) const
    	{
    		return x[i];
    	}
    	float* operator [] (uint8_t i)
    	{
    		return x[i];
    	}
    	void multVecMatrix(const Vec3f &amp;amp;src, Vec3f &amp;amp;dst) const
    	{
    		float a, b, c, w;
    		a = src[0] * x[0][0] + src[1] * x[1][0] + src[2] * x[2][0] + x[3][0];
    		b = src[0] * x[0][1] + src[1] * x[1][1] + src[2] * x[2][1] + x[3][1];
    		c = src[0] * x[0][2] + src[1] * x[1][2] + src[2] * x[2][2] + x[3][2];
    		w = src[0] * x[0][3] + src[1] * x[1][3] + src[2] * x[2][3] + x[3][3];
    		dst.x = a / w;
    		dst.y = b / w;
    		dst.z = c / w;
    	}
    	void multDirMatrix(const Vec3f &amp;amp;src, Vec3f &amp;amp;dst) const
    	{
    		float a, b, c;
    		a = src[0] * x[0][0] + src[1] * x[1][0] + src[2] * x[2][0];
    		b = src[0] * x[0][1] + src[1] * x[1][1] + src[2] * x[2][1];
    		c = src[0] * x[0][2] + src[1] * x[1][2] + src[2] * x[2][2];
    		dst.x = a;
    		dst.y = b;
    		dst.z = c;
    	}
    	Matrix44 inverse()
    	{
    		int i, j, k;
    		Matrix44 s;
    		Matrix44 t (*this);
    		for (i = 0; i &amp;lt; 3 ; i++)
    		{
    			int pivot = i;
    			float pivotsize = t[i][i];
    			if (pivotsize &amp;lt; 0)pivotsize = -pivotsize;
    			for (j = i + 1; j &amp;lt; 4; j++)if (abs(t[j][i]) &amp;gt; pivotsize)pivot = j, pivotsize = abs(t[j][i]);
    			if (pivotsize == 0)return Matrix44();
    			if (pivot != i)for (j = 0; j &amp;lt; 4; j++)swap(t[i][j], t[pivot][j]), swap(s[i][j], s[pivot][j]);
    			for (j = i + 1; j &amp;lt; 4; j++)
    			{
    				float f = t[j][i] / t[i][i];
    				for (k = 0; k &amp;lt; 4; k++)t[j][k] -= f * t[i][k], s[j][k] -= f * s[i][k];
    			}
    		}
    		for (i = 3; i &amp;gt;= 0; --i)
    		{
    			float f;
    			if ((f = t[i][i]) == 0)return Matrix44();
    			for (j = 0; j &amp;lt; 4; j++)t[i][j] /= f, s[i][j] /= f;
    			for (j = 0; j &amp;lt; i; j++)
    			{
    				f = t[j][i];
    				for (k = 0; k &amp;lt; 4; k++)t[j][k] -= f * t[i][k], s[j][k] -= f * s[i][k];
    			}
    		}
    		return s;
    	}
    };
    bool inpoly(int x, int y, int a[])
    {
    	int count = 0;
    	for (int i = 0; i &amp;lt; 8; i += 2)
    	{
    		int x1 = a[i], y1 = a[i + 1], x2 = a[(i + 2) % 8], y2 = a[(i + 3) % 8];
    		if ((y1 &amp;lt; y &amp;amp;&amp;amp; y2 &amp;gt;= y) || (y1 &amp;gt;= y &amp;amp;&amp;amp; y2 &amp;lt; y))
    		{
    			int cross_x = (y - y1) * (x2 - x1) / (y2 - y1) + x1;
    			if (cross_x &amp;lt; x)count++;
    		}
    	}
    	return count % 2 != 0;
    }
    template &amp;lt;typename T&amp;gt;
    void Sort(std::vector&amp;lt;T&amp;gt;&amp;amp; arr, int low, int high)
    {
    	if (low &amp;lt; high)
    	{
    		int pivotIndex = partition(arr, low, high);
    		Sort(arr, low, pivotIndex - 1);
    		Sort(arr, pivotIndex + 1, high);
    	}
    }
    template &amp;lt;typename T&amp;gt;
    int partition(std::vector&amp;lt;T&amp;gt;&amp;amp; arr, int low, int high)
    {
    	T pivot = arr[high];
    	int i = low - 1;
    	for (int j = low; j &amp;lt;= high - 1; j++)
    	{
    		if (arr[j] &amp;lt; pivot)
    		{
    			i++;
    			swap(arr[i], arr[j]);
    		}
    	}
    	swap(arr[i + 1], arr[high]);
    	return i + 1;
    }
    #include &amp;lt;chrono&amp;gt;
    long long getseconds()
    {
    	auto now = std::chrono::high_resolution_clock::now();
    	auto nanos = std::chrono::time_point_cast&amp;lt;std::chrono::nanoseconds&amp;gt;(now);
    	return nanos.time_since_epoch().count();
    }
    int f45 (double n)
    {
    	if (n &amp;gt; 0)return n - int(n) &amp;gt;= 0.5 ? int(n) + 1 : int(n);
    	else return -n - int(-n) &amp;gt;= 0.5 ? -(int(-n) + 1) : -int(-n);
    }
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;把头文件做完后我们需要下载一些贴图。
方块贴图&lt;/p&gt;
&lt;p&gt;&lt;code&gt;block 文件夹文件 : Block文件夹 (提取码:fh2y 永久有效)&lt;/code&gt;&amp;lt;br/&amp;gt;
&lt;code&gt;destroy 文件夹文件 : Destroy文件夹 (提取码:mmmu 永久有效)&lt;/code&gt;&amp;lt;br/&amp;gt;
&lt;code&gt;item 文件夹文件 : Item文件夹 (提取码:u1g4 永久有效)&lt;/code&gt;&amp;lt;br/&amp;gt;
&lt;code&gt;noob 文件夹文件 : Noob文件夹 (提取码:yn8m 永久有效)&lt;/code&gt;&amp;lt;br/&amp;gt;&lt;/p&gt;
&lt;p&gt;//注 : 感谢 &lt;strong&gt;weixin_74969969&lt;/strong&gt; 用户即使提出意见~谢谢🙏&lt;/p&gt;
&lt;p&gt;接下来就是这个程序最重要的部分——主程序(main)&lt;/p&gt;
&lt;h2&gt;主程序&lt;/h2&gt;
&lt;h3&gt;Minecraft.cpp&lt;/h3&gt;
&lt;pre&gt;&lt;code&gt;#include &amp;lt;windows.h&amp;gt;
#include &amp;lt;iostream&amp;gt;
#include &amp;lt;conio.h&amp;gt;

using namespace std;

const int WIDTH = 80;
const int HEIGHT = 30;

const int WORLD_W = 200;
const int WORLD_H = 50;

char screen[HEIGHT][WIDTH + 1];
char world[WORLD_H][WORLD_W];

float playerX = 10;
float playerY = 10;

float velocityY = 0;

bool running = true;
bool onGround = false;

HANDLE hConsole;

// =======================
// 初始化世界
// =======================

void initWorld()
{
    for(int y = 0; y &amp;lt; WORLD_H; y++)
    {
        for(int x = 0; x &amp;lt; WORLD_W; x++)
        {
            world[y][x] = &apos; &apos;;
        }
    }

    // 地面
    for(int x = 0; x &amp;lt; WORLD_W; x++)
    {
        world[25][x] = &apos;#&apos;;
    }

    // 平台
    for(int x = 20; x &amp;lt; 35; x++)
    {
        world[20][x] = &apos;#&apos;;
    }

    for(int x = 50; x &amp;lt; 70; x++)
    {
        world[15][x] = &apos;#&apos;;
    }

    // 墙
    for(int y = 10; y &amp;lt; 25; y++)
    {
        world[y][40] = &apos;#&apos;;
    }
}

// =======================
// 清空缓冲区
// =======================

void clearBuffer()
{
    for(int y = 0; y &amp;lt; HEIGHT; y++)
    {
        for(int x = 0; x &amp;lt; WIDTH; x++)
        {
            screen[y][x] = &apos; &apos;;
        }

        screen[y][WIDTH] = &apos;\0&apos;;
    }
}

// =======================
// 摄像机渲染
// =======================

void renderWorld()
{
    int cameraX = (int)playerX - WIDTH / 2;
    int cameraY = (int)playerY - HEIGHT / 2;

    if(cameraX &amp;lt; 0) cameraX = 0;
    if(cameraY &amp;lt; 0) cameraY = 0;

    for(int y = 0; y &amp;lt; HEIGHT; y++)
    {
        for(int x = 0; x &amp;lt; WIDTH; x++)
        {
            int worldX = x + cameraX;
            int worldY = y + cameraY;

            if(worldX &amp;gt;= 0 &amp;amp;&amp;amp;
               worldX &amp;lt; WORLD_W &amp;amp;&amp;amp;
               worldY &amp;gt;= 0 &amp;amp;&amp;amp;
               worldY &amp;lt; WORLD_H)
            {
                screen[y][x] = world[worldY][worldX];
            }
        }
    }

    // 玩家
    int px = (int)playerX - cameraX;
    int py = (int)playerY - cameraY;

    if(px &amp;gt;= 0 &amp;amp;&amp;amp; px &amp;lt; WIDTH &amp;amp;&amp;amp;
       py &amp;gt;= 0 &amp;amp;&amp;amp; py &amp;lt; HEIGHT)
    {
        screen[py][px] = &apos;@&apos;;
    }
}

// =======================
// 碰撞检测
// =======================

bool isSolid(int x, int y)
{
    if(x &amp;lt; 0 || x &amp;gt;= WORLD_W ||
       y &amp;lt; 0 || y &amp;gt;= WORLD_H)
    {
        return true;
    }

    return world[y][x] == &apos;#&apos;;
}

// =======================
// 玩家物理
// =======================

void updatePhysics()
{
    velocityY += 0.15f;

    float newY = playerY + velocityY;

    if(velocityY &amp;gt; 0)
    {
        if(isSolid((int)playerX, (int)(newY)))
        {
            playerY = (int)newY;
            velocityY = 0;
            onGround = true;
        }
        else
        {
            playerY = newY;
            onGround = false;
        }
    }
    else
    {
        playerY = newY;
    }
}

// =======================
// 输入
// =======================

void input()
{
    if(GetAsyncKeyState(&apos;A&apos;) &amp;amp; 0x8000)
    {
        if(!isSolid((int)(playerX - 1), (int)playerY))
        {
            playerX -= 0.2f;
        }
    }

    if(GetAsyncKeyState(&apos;D&apos;) &amp;amp; 0x8000)
    {
        if(!isSolid((int)(playerX + 1), (int)playerY))
        {
            playerX += 0.2f;
        }
    }

    if(GetAsyncKeyState(VK_SPACE) &amp;amp; 0x8000)
    {
        if(onGround)
        {
            velocityY = -0.8f;
            onGround = false;
        }
    }

    if(GetAsyncKeyState(VK_ESCAPE) &amp;amp; 0x8000)
    {
        running = false;
    }
}

// =======================
// 渲染到控制台
// =======================

void render()
{
    COORD pos = {0,0};
    SetConsoleCursorPosition(hConsole, pos);

    for(int y = 0; y &amp;lt; HEIGHT; y++)
    {
        cout &amp;lt;&amp;lt; screen[y] &amp;lt;&amp;lt; &apos;\n&apos;;
    }
}

// =======================
// 隐藏光标
// =======================

void hideCursor()
{
    CONSOLE_CURSOR_INFO cursor;

    cursor.dwSize = 1;
    cursor.bVisible = FALSE;

    SetConsoleCursorInfo(hConsole, &amp;amp;cursor);
}

// =======================
// 设置窗口大小
// =======================

void setupConsole()
{
    system(&quot;mode con cols=80 lines=30&quot;);

    hConsole = GetStdHandle(STD_OUTPUT_HANDLE);

    hideCursor();
}

// =======================
// 主循环
// =======================

int main()
{
    setupConsole();

    initWorld();

    while(running)
    {
        clearBuffer();

        input();

        updatePhysics();

        renderWorld();

        render();

        Sleep(16);
    }

    return 0;
}
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;cpp
运行&lt;/p&gt;
&lt;p&gt;这样我们就做好了Minecraft 2D版
后记&lt;/p&gt;
&lt;p&gt;好了这就是这期文章要分享的全部内容了！非常感谢你能够阅读这篇文章，和看到这里，觉得文章还不错，关注一下？  咱们下篇再见~~~&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;本文来自爱编程的007 , 转载请附上原文出处链接和本声明。
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;————————————————
版权声明：本文为CSDN博主「爱编程的007」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/2301_78110244/article/details/145191268&lt;/p&gt;
</content:encoded></item><item><title>Python安装库老是报错如何处理</title><link>https://fuwari.vercel.app/posts/python_error_installing_library/</link><guid isPermaLink="true">https://fuwari.vercel.app/posts/python_error_installing_library/</guid><description>如何使用pip命令来解决安装库时的报错问题</description><pubDate>Tue, 05 May 2026 00:00:00 GMT</pubDate><content:encoded>&lt;blockquote&gt;
&lt;p&gt;在使用Python编程的时候，通常需要添加一些扩展库。但是又不知如何安装，按照网上说的运行以后还是报错。&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h1&gt;前言&lt;/h1&gt;
&lt;p&gt;&lt;code&gt;本文章来自博主 SkyMax(スキマックス) 编写 版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明&lt;/code&gt;&lt;/p&gt;
&lt;h1&gt;正文&lt;/h1&gt;
&lt;blockquote&gt;
&lt;p&gt;在编程的时候，需要添加一些扩展库。但是又不知如何安装，网上说的都是：&lt;/p&gt;
&lt;/blockquote&gt;
&lt;pre&gt;&lt;code&gt;pip install openpyxl tqdm
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;:::important
上面代码只对MacOS&amp;amp;Linux有效👆
:::
可是对如0基础的人太难了吧？通用的解决办法是：在命令行终端（ Windows 是 CMD 或 PowerShell，macOS/Linux 是 Terminal）中输入以下命令来安装所需的库。&lt;/p&gt;
&lt;h2&gt;报错&lt;/h2&gt;
&lt;blockquote&gt;
&lt;p&gt;但如果你是Windows系统（Mac&amp;amp;Linux可跳过，除非想学知识）就会报错（只针对WindowsShell）&lt;/p&gt;
&lt;/blockquote&gt;
&lt;pre&gt;&lt;code&gt;    pip : The term &apos;pip&apos; is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name, or if 
    a path was included, verify that the path is correct and try again.
    + pip install msoffcrypto-tool -i https://pypi.tuna.tsinghua.edu.cn/sim ...
        + FullyQualifiedErrorId : CommandNotFoundException
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;这个报错说白了就是WindowsShell不能直接认到这个&apos;pip&apos;命令，也没有将&apos;pip&apos;添加至环境变量中。
那我们应如何解决呢？&lt;/p&gt;
&lt;h1&gt;怎样解决&lt;/h1&gt;
&lt;p&gt;在前面加上&lt;code&gt;py&lt;/code&gt;或&lt;code&gt;python&lt;/code&gt;（代表声明Python）后面加上&lt;code&gt;“-m pip”&lt;/code&gt;，加上&lt;code&gt;install&lt;/code&gt;代表我要安装库还是其他的镜像来源……(最好不要超过3个，用空格代表第一个库的名称已经完结)&lt;/p&gt;
&lt;p&gt;合起来为：&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;​​​​​​​py -m pip install openpyxl tqdm
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;按下“Enter键”后，也可能像我一样报错：&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;    Downloading openpyxl-3.1.5-py2.py3-none-any.whl (250 kB)
       ━━━━╸━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 30.7/250.9 kB 5.9 kB/s eta 0:00:38
    ERROR: Exception:
    Traceback (most recent call last):
      File &quot;C:\Users\Asushosu\AppData\Local\Programs\Python\Python312\Lib\site-packages\pip\_vendor\urllib3\response.py&quot;, line 438, in _error_catcher   
        yield
      File &quot;C:\Users\Asushosu\AppData\Local\Programs\Python\Python312\Lib\site-packages\pip\_vendor\urllib3\response.py&quot;, line 561, in read
        data = self._fp_read(amt) if not fp_closed else b&quot;&quot;
               ^^^^^^^^^^^^^^^^^^
      File &quot;C:\Users\Asushosu\AppData\Local\Programs\Python\Python312\Lib\site-packages\pip\_vendor\urllib3\response.py&quot;, line 527, in _fp_read
        return self._fp.read(amt) if amt is not None else self._fp.read()
               ^^^^^^^^^^^^^^^^^^
      File &quot;C:\Users\Asushosu\AppData\Local\Programs\Python\Python312\Lib\site-packages\pip\_vendor\cachecontrol\filewrapper.py&quot;, line 90, in read      
        data = self.__fp.read(amt)
               ^^^^^^^^^^^^^^^^^^^
      File &quot;C:\Users\Asushosu\AppData\Local\Programs\Python\Python312\Lib\http\client.py&quot;, line 479, in read
        s = self.fp.read(amt)
            ^^^^^^^^^^^^^^^^^
      File &quot;C:\Users\Asushosu\AppData\Local\Programs\Python\Python312\Lib\socket.py&quot;, line 707, in readinto
        return self._sock.recv_into(b)
               ^^^^^^^^^^^^^^^^^^^^^^^
      File &quot;C:\Users\Asushosu\AppData\Local\Programs\Python\Python312\Lib\ssl.py&quot;, line 1253, in recv_into
        return self.read(nbytes, buffer)
               ^^^^^^^^^^^^^^^^^^^^^^^^^
      File &quot;C:\Users\Asushosu\AppData\Local\Programs\Python\Python312\Lib\ssl.py&quot;, line 1105, in read
        return self._sslobj.read(len, buffer)
               ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    TimeoutError: The read operation timed out
     
    During handling of the above exception, another exception occurred:
     
    Traceback (most recent call last):
      File &quot;C:\Users\Asushosu\AppData\Local\Programs\Python\Python312\Lib\site-packages\pip\_internal\cli\base_command.py&quot;, line 180, in exc_logging_wra
    pper
        status = run_func(*args)
                 ^^^^^^^^^^^^^^^
      File &quot;C:\Users\Asushosu\AppData\Local\Programs\Python\Python312\Lib\site-packages\pip\_internal\cli\req_command.py&quot;, line 248, in wrapper
        return func(self, options, args)
               ^^^^^^^^^^^^^^^^^^^^^^^^^
      File &quot;C:\Users\Asushosu\AppData\Local\Programs\Python\Python312\Lib\site-packages\pip\_internal\commands\install.py&quot;, line 377, in run
        requirement_set = resolver.resolve(
                          ^^^^^^^^^^^^^^^^^
      File &quot;C:\Users\Asushosu\AppData\Local\Programs\Python\Python312\Lib\site-packages\pip\_internal\resolution\resolvelib\resolver.py&quot;, line 161, in r
    esolve
        self.factory.preparer.prepare_linked_requirements_more(reqs)
      File &quot;C:\Users\Asushosu\AppData\Local\Programs\Python\Python312\Lib\site-packages\pip\_internal\operations\prepare.py&quot;, line 565, in prepare_linke
    d_requirements_more
        self._complete_partial_requirements(
      File &quot;C:\Users\Asushosu\AppData\Local\Programs\Python\Python312\Lib\site-packages\pip\_internal\operations\prepare.py&quot;, line 479, in _complete_par
    tial_requirements
        for link, (filepath, _) in batch_download:
      File &quot;C:\Users\Asushosu\AppData\Local\Programs\Python\Python312\Lib\site-packages\pip\_internal\network\download.py&quot;, line 183, in __call__       
        for chunk in chunks:
      File &quot;C:\Users\Asushosu\AppData\Local\Programs\Python\Python312\Lib\site-packages\pip\_internal\cli\progress_bars.py&quot;, line 53, in _rich_progress_
    bar
        for chunk in iterable:
      File &quot;C:\Users\Asushosu\AppData\Local\Programs\Python\Python312\Lib\site-packages\pip\_internal\network\utils.py&quot;, line 63, in response_chunks    
        for chunk in response.raw.stream(
      File &quot;C:\Users\Asushosu\AppData\Local\Programs\Python\Python312\Lib\site-packages\pip\_vendor\urllib3\response.py&quot;, line 622, in stream
        data = self.read(amt=amt, decode_content=decode_content)
               ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
      File &quot;C:\Users\Asushosu\AppData\Local\Programs\Python\Python312\Lib\site-packages\pip\_vendor\urllib3\response.py&quot;, line 560, in read
        with self._error_catcher():
      File &quot;C:\Users\Asushosu\AppData\Local\Programs\Python\Python312\Lib\contextlib.py&quot;, line 158, in __exit__
        self.gen.throw(value)
      File &quot;C:\Users\Asushosu\AppData\Local\Programs\Python\Python312\Lib\site-packages\pip\_vendor\urllib3\response.py&quot;, line 443, in _error_catcher   
        raise ReadTimeoutError(self._pool, None, &quot;Read timed out.&quot;)
    pip._vendor.urllib3.exceptions.ReadTimeoutError: HTTPSConnectionPool(host=&apos;files.pythonhosted.org&apos;, port=443): Read timed out.
     
    [notice] A new release of pip is available: 23.2.1 -&amp;gt; 25.2
    [notice] To update, run: python.exe -m pip install --upgrade pip
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;这代表：&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;要么你的网络有问题，网速不佳（现在可以去检查一下了）&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;由于默认的 PyPI 服务器（ https://pypi.org ） 在国外，国内访问可能较慢,就超时了。&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;总的来说：这个错误表明 pip 在下载 openpyxl 时&lt;strong&gt;超时&lt;/strong&gt;（Timeout），可能是由于&lt;strong&gt;网络连接不稳定*、&lt;strong&gt;下载速度过慢&lt;/strong&gt;或&lt;/strong&gt; Python 包服务器（PyPI）暂时不可访问导致的**。&lt;/p&gt;
&lt;h2&gt;解决办法1&lt;/h2&gt;
&lt;p&gt;可以改用&lt;code&gt;国内镜像源（如清华、阿里云、豆瓣等）&lt;/code&gt;，这里就不详细说了。
操作方法：
在&lt;code&gt;py -m pip install openpyxl tqdm&lt;/code&gt;后面接上：-i &lt;code&gt;https://pypi.tuna.tsinghua.edu.cn/simple&lt;/code&gt;
如下：&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;py -m pip install openpyxl tqdm -i https://pypi.tuna.tsinghua.edu.cn/simple
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;或：&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;py -m pip install openpyxl tqdm -i https://mirrors.aliyun.com/pypi/simple/
&lt;/code&gt;&lt;/pre&gt;
&lt;pre&gt;&lt;code&gt;py -m pip install openpyxl tqdm -i https://pypi.douban.com/simple/
&lt;/code&gt;&lt;/pre&gt;
&lt;h2&gt;解决办法2&lt;/h2&gt;
&lt;blockquote&gt;
&lt;p&gt;增加超时时间&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;如果网络较慢，可以手动增加 &lt;code&gt;--timeout&lt;/code&gt; 参数（默认 15 秒）：
:::warning
手动（请留意）
:::&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;py -m pip install --timeout=100 openpyxl tqdm
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;:::caution
默认（谨慎操作）
:::&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;py -m pip install --default-timeout=100 openpyxl tqdm
&lt;/code&gt;&lt;/pre&gt;
&lt;h2&gt;解决办法3&lt;/h2&gt;
&lt;p&gt;:::tips
我个人实际上并不推荐此办法，因为如果你稍微没留意，万一操作错了，那就不可挽救了。我个人实际上并不推荐此办法，因为如果你稍微没留意，万一操作错了，那就不可挽救了。
:::&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;请手动下载并安装
如果仍然失败，可以 手动下载 &lt;code&gt;.whl 文件&lt;/code&gt; 安装：
1. 访问 &lt;code&gt;Python Package Index (PyPI)&lt;/code&gt; 搜索 &lt;code&gt;openpyxl&lt;/code&gt; 和 &lt;code&gt;tqdm&lt;/code&gt;。
2. 下载 .whl 文件（如 openpyxl-3.1.5-py2.py3-none-any.whl）。&lt;/p&gt;
&lt;/blockquote&gt;
&lt;pre&gt;&lt;code&gt;3. 进入下载目录，运行：
&lt;/code&gt;&lt;/pre&gt;
&lt;pre&gt;&lt;code&gt;		py -m pip install openpyxl-3.1.5-py2.py3-none-any.whl py -m pip install tqdm-4.66.1-py3-none-any.whl
        py -m pip install openpyxl-3.1.5-py2.py3-none-any.whl
        py -m pip install tqdm-4.66.1-py3-none-any.whl
&lt;/code&gt;&lt;/pre&gt;
&lt;h1&gt;后记&lt;/h1&gt;
&lt;p&gt;好了这就是这期文章要分享的全部内容了！非常感谢你能够阅读这篇文章，生活愉快哦~咱们下篇再见~~~&lt;/p&gt;
&lt;hr /&gt;
&lt;p&gt;本文来自SkyMax(スキマックス),转载请附上原文出处链接和本声明。&lt;/p&gt;
</content:encoded></item><item><title>Markdown Extended Features</title><link>https://fuwari.vercel.app/posts/markdown-extended/</link><guid isPermaLink="true">https://fuwari.vercel.app/posts/markdown-extended/</guid><description>Read more about Markdown features in Fuwari</description><pubDate>Wed, 01 May 2024 00:00:00 GMT</pubDate><content:encoded>&lt;h2&gt;GitHub Repository Cards&lt;/h2&gt;
&lt;p&gt;You can add dynamic cards that link to GitHub repositories, on page load, the repository information is pulled from the GitHub API.&lt;/p&gt;
&lt;p&gt;::github{repo=&quot;Fabrizz/MMM-OnSpotify&quot;}&lt;/p&gt;
&lt;p&gt;Create a GitHub repository card with the code &lt;code&gt;::github{repo=&quot;&amp;lt;owner&amp;gt;/&amp;lt;repo&amp;gt;&quot;}&lt;/code&gt;.&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;::github{repo=&quot;saicaca/fuwari&quot;}
&lt;/code&gt;&lt;/pre&gt;
&lt;h2&gt;Admonitions&lt;/h2&gt;
&lt;p&gt;Following types of admonitions are supported: &lt;code&gt;note&lt;/code&gt; &lt;code&gt;tip&lt;/code&gt; &lt;code&gt;important&lt;/code&gt; &lt;code&gt;warning&lt;/code&gt; &lt;code&gt;caution&lt;/code&gt;&lt;/p&gt;
&lt;p&gt;:::note
Highlights information that users should take into account, even when skimming.
:::&lt;/p&gt;
&lt;p&gt;:::tip
Optional information to help a user be more successful.
:::&lt;/p&gt;
&lt;p&gt;:::important
Crucial information necessary for users to succeed.
:::&lt;/p&gt;
&lt;p&gt;:::warning
Critical content demanding immediate user attention due to potential risks.
:::&lt;/p&gt;
&lt;p&gt;:::caution
Negative potential consequences of an action.
:::&lt;/p&gt;
&lt;h3&gt;Basic Syntax&lt;/h3&gt;
&lt;pre&gt;&lt;code&gt;:::note
Highlights information that users should take into account, even when skimming.
:::

:::tip
Optional information to help a user be more successful.
:::
&lt;/code&gt;&lt;/pre&gt;
&lt;h3&gt;Custom Titles&lt;/h3&gt;
&lt;p&gt;The title of the admonition can be customized.&lt;/p&gt;
&lt;p&gt;:::note[MY CUSTOM TITLE]
This is a note with a custom title.
:::&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;:::note[MY CUSTOM TITLE]
This is a note with a custom title.
:::
&lt;/code&gt;&lt;/pre&gt;
&lt;h3&gt;GitHub Syntax&lt;/h3&gt;
&lt;blockquote&gt;
&lt;p&gt;[!TIP]
&lt;a href=&quot;https://github.com/orgs/community/discussions/16925&quot;&gt;The GitHub syntax&lt;/a&gt; is also supported.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;pre&gt;&lt;code&gt;&amp;gt; [!NOTE]
&amp;gt; The GitHub syntax is also supported.

&amp;gt; [!TIP]
&amp;gt; The GitHub syntax is also supported.
&lt;/code&gt;&lt;/pre&gt;
&lt;h3&gt;Spoiler&lt;/h3&gt;
&lt;p&gt;You can add spoilers to your text. The text also supports &lt;strong&gt;Markdown&lt;/strong&gt; syntax.&lt;/p&gt;
&lt;p&gt;The content :spoiler[is hidden &lt;strong&gt;ayyy&lt;/strong&gt;]!&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;The content :spoiler[is hidden **ayyy**]!

&lt;/code&gt;&lt;/pre&gt;
</content:encoded></item><item><title>Expressive Code Example</title><link>https://fuwari.vercel.app/posts/expressive-code/</link><guid isPermaLink="true">https://fuwari.vercel.app/posts/expressive-code/</guid><description>How code blocks look in Markdown using Expressive Code.</description><pubDate>Wed, 10 Apr 2024 00:00:00 GMT</pubDate><content:encoded>&lt;p&gt;Here, we&apos;ll explore how code blocks look using &lt;a href=&quot;https://expressive-code.com/&quot;&gt;Expressive Code&lt;/a&gt;. The provided examples are based on the official documentation, which you can refer to for further details.&lt;/p&gt;
&lt;h2&gt;Expressive Code&lt;/h2&gt;
&lt;h3&gt;Syntax Highlighting&lt;/h3&gt;
&lt;p&gt;&lt;a href=&quot;https://expressive-code.com/key-features/syntax-highlighting/&quot;&gt;Syntax Highlighting&lt;/a&gt;&lt;/p&gt;
&lt;h4&gt;Regular syntax highlighting&lt;/h4&gt;
&lt;pre&gt;&lt;code&gt;console.log(&apos;This code is syntax highlighted!&apos;)
&lt;/code&gt;&lt;/pre&gt;
&lt;h4&gt;Rendering ANSI escape sequences&lt;/h4&gt;
&lt;pre&gt;&lt;code&gt;ANSI colors:
- Regular: [31mRed[0m [32mGreen[0m [33mYellow[0m [34mBlue[0m [35mMagenta[0m [36mCyan[0m
- Bold:    [1;31mRed[0m [1;32mGreen[0m [1;33mYellow[0m [1;34mBlue[0m [1;35mMagenta[0m [1;36mCyan[0m
- Dimmed:  [2;31mRed[0m [2;32mGreen[0m [2;33mYellow[0m [2;34mBlue[0m [2;35mMagenta[0m [2;36mCyan[0m

256 colors (showing colors 160-177):
[38;5;160m160 [38;5;161m161 [38;5;162m162 [38;5;163m163 [38;5;164m164 [38;5;165m165[0m
[38;5;166m166 [38;5;167m167 [38;5;168m168 [38;5;169m169 [38;5;170m170 [38;5;171m171[0m
[38;5;172m172 [38;5;173m173 [38;5;174m174 [38;5;175m175 [38;5;176m176 [38;5;177m177[0m

Full RGB colors:
[38;2;34;139;34mForestGreen - RGB(34, 139, 34)[0m

Text formatting: [1mBold[0m [2mDimmed[0m [3mItalic[0m [4mUnderline[0m
&lt;/code&gt;&lt;/pre&gt;
&lt;h3&gt;Editor &amp;amp; Terminal Frames&lt;/h3&gt;
&lt;p&gt;&lt;a href=&quot;https://expressive-code.com/key-features/frames/&quot;&gt;Editor &amp;amp; Terminal Frames&lt;/a&gt;&lt;/p&gt;
&lt;h4&gt;Code editor frames&lt;/h4&gt;
&lt;pre&gt;&lt;code&gt;console.log(&apos;Title attribute example&apos;)
&lt;/code&gt;&lt;/pre&gt;
&lt;hr /&gt;
&lt;pre&gt;&lt;code&gt;&amp;lt;!-- src/content/index.html --&amp;gt;
&amp;lt;div&amp;gt;File name comment example&amp;lt;/div&amp;gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;h4&gt;Terminal frames&lt;/h4&gt;
&lt;pre&gt;&lt;code&gt;echo &quot;This terminal frame has no title&quot;
&lt;/code&gt;&lt;/pre&gt;
&lt;hr /&gt;
&lt;pre&gt;&lt;code&gt;Write-Output &quot;This one has a title!&quot;
&lt;/code&gt;&lt;/pre&gt;
&lt;h4&gt;Overriding frame types&lt;/h4&gt;
&lt;pre&gt;&lt;code&gt;echo &quot;Look ma, no frame!&quot;
&lt;/code&gt;&lt;/pre&gt;
&lt;hr /&gt;
&lt;pre&gt;&lt;code&gt;# Without overriding, this would be a terminal frame
function Watch-Tail { Get-Content -Tail 20 -Wait $args }
New-Alias tail Watch-Tail
&lt;/code&gt;&lt;/pre&gt;
&lt;h3&gt;Text &amp;amp; Line Markers&lt;/h3&gt;
&lt;p&gt;&lt;a href=&quot;https://expressive-code.com/key-features/text-markers/&quot;&gt;Text &amp;amp; Line Markers&lt;/a&gt;&lt;/p&gt;
&lt;h4&gt;Marking full lines &amp;amp; line ranges&lt;/h4&gt;
&lt;pre&gt;&lt;code&gt;// Line 1 - targeted by line number
// Line 2
// Line 3
// Line 4 - targeted by line number
// Line 5
// Line 6
// Line 7 - targeted by range &quot;7-8&quot;
// Line 8 - targeted by range &quot;7-8&quot;
&lt;/code&gt;&lt;/pre&gt;
&lt;h4&gt;Selecting line marker types (mark, ins, del)&lt;/h4&gt;
&lt;pre&gt;&lt;code&gt;function demo() {
  console.log(&apos;this line is marked as deleted&apos;)
  // This line and the next one are marked as inserted
  console.log(&apos;this is the second inserted line&apos;)

  return &apos;this line uses the neutral default marker type&apos;
}
&lt;/code&gt;&lt;/pre&gt;
&lt;h4&gt;Adding labels to line markers&lt;/h4&gt;
&lt;pre&gt;&lt;code&gt;// labeled-line-markers.jsx
&amp;lt;button
  role=&quot;button&quot;
  {...props}
  value={value}
  className={buttonClassName}
  disabled={disabled}
  active={active}
&amp;gt;
  {children &amp;amp;&amp;amp;
    !active &amp;amp;&amp;amp;
    (typeof children === &apos;string&apos; ? &amp;lt;span&amp;gt;{children}&amp;lt;/span&amp;gt; : children)}
&amp;lt;/button&amp;gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;h4&gt;Adding long labels on their own lines&lt;/h4&gt;
&lt;pre&gt;&lt;code&gt;// labeled-line-markers.jsx
&amp;lt;button
  role=&quot;button&quot;
  {...props}

  value={value}
  className={buttonClassName}

  disabled={disabled}
  active={active}
&amp;gt;

  {children &amp;amp;&amp;amp;
    !active &amp;amp;&amp;amp;
    (typeof children === &apos;string&apos; ? &amp;lt;span&amp;gt;{children}&amp;lt;/span&amp;gt; : children)}
&amp;lt;/button&amp;gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;h4&gt;Using diff-like syntax&lt;/h4&gt;
&lt;pre&gt;&lt;code&gt;+this line will be marked as inserted
-this line will be marked as deleted
this is a regular line
&lt;/code&gt;&lt;/pre&gt;
&lt;hr /&gt;
&lt;pre&gt;&lt;code&gt;--- a/README.md
+++ b/README.md
@@ -1,3 +1,4 @@
+this is an actual diff file
-all contents will remain unmodified
 no whitespace will be removed either
&lt;/code&gt;&lt;/pre&gt;
&lt;h4&gt;Combining syntax highlighting with diff-like syntax&lt;/h4&gt;
&lt;pre&gt;&lt;code&gt;  function thisIsJavaScript() {
    // This entire block gets highlighted as JavaScript,
    // and we can still add diff markers to it!
-   console.log(&apos;Old code to be removed&apos;)
+   console.log(&apos;New and shiny code!&apos;)
  }
&lt;/code&gt;&lt;/pre&gt;
&lt;h4&gt;Marking individual text inside lines&lt;/h4&gt;
&lt;pre&gt;&lt;code&gt;function demo() {
  // Mark any given text inside lines
  return &apos;Multiple matches of the given text are supported&apos;;
}
&lt;/code&gt;&lt;/pre&gt;
&lt;h4&gt;Regular expressions&lt;/h4&gt;
&lt;pre&gt;&lt;code&gt;console.log(&apos;The words yes and yep will be marked.&apos;)
&lt;/code&gt;&lt;/pre&gt;
&lt;h4&gt;Escaping forward slashes&lt;/h4&gt;
&lt;pre&gt;&lt;code&gt;echo &quot;Test&quot; &amp;gt; /home/test.txt
&lt;/code&gt;&lt;/pre&gt;
&lt;h4&gt;Selecting inline marker types (mark, ins, del)&lt;/h4&gt;
&lt;pre&gt;&lt;code&gt;function demo() {
  console.log(&apos;These are inserted and deleted marker types&apos;);
  // The return statement uses the default marker type
  return true;
}
&lt;/code&gt;&lt;/pre&gt;
&lt;h3&gt;Word Wrap&lt;/h3&gt;
&lt;p&gt;&lt;a href=&quot;https://expressive-code.com/key-features/word-wrap/&quot;&gt;Word Wrap&lt;/a&gt;&lt;/p&gt;
&lt;h4&gt;Configuring word wrap per block&lt;/h4&gt;
&lt;pre&gt;&lt;code&gt;// Example with wrap
function getLongString() {
  return &apos;This is a very long string that will most probably not fit into the available space unless the container is extremely wide&apos;
}
&lt;/code&gt;&lt;/pre&gt;
&lt;hr /&gt;
&lt;pre&gt;&lt;code&gt;// Example with wrap=false
function getLongString() {
  return &apos;This is a very long string that will most probably not fit into the available space unless the container is extremely wide&apos;
}
&lt;/code&gt;&lt;/pre&gt;
&lt;h4&gt;Configuring indentation of wrapped lines&lt;/h4&gt;
&lt;pre&gt;&lt;code&gt;// Example with preserveIndent (enabled by default)
function getLongString() {
  return &apos;This is a very long string that will most probably not fit into the available space unless the container is extremely wide&apos;
}
&lt;/code&gt;&lt;/pre&gt;
&lt;hr /&gt;
&lt;pre&gt;&lt;code&gt;// Example with preserveIndent=false
function getLongString() {
  return &apos;This is a very long string that will most probably not fit into the available space unless the container is extremely wide&apos;
}
&lt;/code&gt;&lt;/pre&gt;
&lt;h2&gt;Collapsible Sections&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;https://expressive-code.com/plugins/collapsible-sections/&quot;&gt;Collapsible Sections&lt;/a&gt;&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;// All this boilerplate setup code will be collapsed
import { someBoilerplateEngine } from &apos;@example/some-boilerplate&apos;
import { evenMoreBoilerplate } from &apos;@example/even-more-boilerplate&apos;

const engine = someBoilerplateEngine(evenMoreBoilerplate())

// This part of the code will be visible by default
engine.doSomething(1, 2, 3, calcFn)

function calcFn() {
  // You can have multiple collapsed sections
  const a = 1
  const b = 2
  const c = a + b

  // This will remain visible
  console.log(`Calculation result: ${a} + ${b} = ${c}`)
  return c
}

// All this code until the end of the block will be collapsed again
engine.closeConnection()
engine.freeMemory()
engine.shutdown({ reason: &apos;End of example boilerplate code&apos; })
&lt;/code&gt;&lt;/pre&gt;
&lt;h2&gt;Line Numbers&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;https://expressive-code.com/plugins/line-numbers/&quot;&gt;Line Numbers&lt;/a&gt;&lt;/p&gt;
&lt;h3&gt;Displaying line numbers per block&lt;/h3&gt;
&lt;pre&gt;&lt;code&gt;// This code block will show line numbers
console.log(&apos;Greetings from line 2!&apos;)
console.log(&apos;I am on line 3&apos;)
&lt;/code&gt;&lt;/pre&gt;
&lt;hr /&gt;
&lt;pre&gt;&lt;code&gt;// Line numbers are disabled for this block
console.log(&apos;Hello?&apos;)
console.log(&apos;Sorry, do you know what line I am on?&apos;)
&lt;/code&gt;&lt;/pre&gt;
&lt;h3&gt;Changing the starting line number&lt;/h3&gt;
&lt;pre&gt;&lt;code&gt;console.log(&apos;Greetings from line 5!&apos;)
console.log(&apos;I am on line 6&apos;)
&lt;/code&gt;&lt;/pre&gt;
</content:encoded></item><item><title>Simple Guides for Fuwari</title><link>https://fuwari.vercel.app/posts/guide/</link><guid isPermaLink="true">https://fuwari.vercel.app/posts/guide/</guid><description>How to use this blog template.</description><pubDate>Mon, 01 Apr 2024 00:00:00 GMT</pubDate><content:encoded>&lt;blockquote&gt;
&lt;p&gt;Cover image source: &lt;a href=&quot;https://image.civitai.com/xG1nkqKTMzGDvpLrqFT7WA/208fc754-890d-4adb-9753-2c963332675d/width=2048/01651-1456859105-(colour_1.5),girl,_Blue,yellow,green,cyan,purple,red,pink,_best,8k,UHD,masterpiece,male%20focus,%201boy,gloves,%20ponytail,%20long%20hair,.jpeg&quot;&gt;Source&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;This blog template is built with &lt;a href=&quot;https://astro.build/&quot;&gt;Astro&lt;/a&gt;. For the things that are not mentioned in this guide, you may find the answers in the &lt;a href=&quot;https://docs.astro.build/&quot;&gt;Astro Docs&lt;/a&gt;.&lt;/p&gt;
&lt;h2&gt;Front-matter of Posts&lt;/h2&gt;
&lt;pre&gt;&lt;code&gt;---
title: My First Blog Post
published: 2023-09-09
description: This is the first post of my new Astro blog.
image: ./cover.jpg
tags: [Foo, Bar]
category: Front-end
draft: false
---
&lt;/code&gt;&lt;/pre&gt;
&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Attribute&lt;/th&gt;
&lt;th&gt;Description&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;title&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;The title of the post.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;published&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;The date the post was published.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;description&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;A short description of the post. Displayed on index page.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;image&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;The cover image path of the post.&amp;lt;br/&amp;gt;1. Start with &lt;code&gt;http://&lt;/code&gt; or &lt;code&gt;https://&lt;/code&gt;: Use web image&amp;lt;br/&amp;gt;2. Start with &lt;code&gt;/&lt;/code&gt;: For image in &lt;code&gt;public&lt;/code&gt; dir&amp;lt;br/&amp;gt;3. With none of the prefixes: Relative to the markdown file&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;tags&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;The tags of the post.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;category&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;The category of the post.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;draft&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;If this post is still a draft, which won&apos;t be displayed.&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;h2&gt;Where to Place the Post Files&lt;/h2&gt;
&lt;p&gt;Your post files should be placed in &lt;code&gt;src/content/posts/&lt;/code&gt; directory. You can also create sub-directories to better organize your posts and assets.&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;src/content/posts/
├── post-1.md
└── post-2/
    ├── cover.png
    └── index.md
&lt;/code&gt;&lt;/pre&gt;
</content:encoded></item><item><title>Markdown Example</title><link>https://fuwari.vercel.app/posts/markdown/</link><guid isPermaLink="true">https://fuwari.vercel.app/posts/markdown/</guid><description>A simple example of a Markdown blog post.</description><pubDate>Sun, 01 Oct 2023 00:00:00 GMT</pubDate><content:encoded>&lt;h1&gt;An h1 header&lt;/h1&gt;
&lt;p&gt;Paragraphs are separated by a blank line.&lt;/p&gt;
&lt;p&gt;2nd paragraph. &lt;em&gt;Italic&lt;/em&gt;, &lt;strong&gt;bold&lt;/strong&gt;, and &lt;code&gt;monospace&lt;/code&gt;. Itemized lists
look like:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;this one&lt;/li&gt;
&lt;li&gt;that one&lt;/li&gt;
&lt;li&gt;the other one&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Note that --- not considering the asterisk --- the actual text
content starts at 4-columns in.&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;Block quotes are
written like so.&lt;/p&gt;
&lt;p&gt;They can span multiple paragraphs,
if you like.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;Use 3 dashes for an em-dash. Use 2 dashes for ranges (ex., &quot;it&apos;s all
in chapters 12--14&quot;). Three dots ... will be converted to an ellipsis.
Unicode is supported. ☺&lt;/p&gt;
&lt;h2&gt;An h2 header&lt;/h2&gt;
&lt;p&gt;Here&apos;s a numbered list:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;first item&lt;/li&gt;
&lt;li&gt;second item&lt;/li&gt;
&lt;li&gt;third item&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;Note again how the actual text starts at 4 columns in (4 characters
from the left side). Here&apos;s a code sample:&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;# Let me re-iterate ...
for i in 1 .. 10 { do-something(i) }
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;As you probably guessed, indented 4 spaces. By the way, instead of
indenting the block, you can use delimited blocks, if you like:&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;define foobar() {
    print &quot;Welcome to flavor country!&quot;;
}
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;(which makes copying &amp;amp; pasting easier). You can optionally mark the
delimited block for Pandoc to syntax highlight it:&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;import time
# Quick, count to ten!
for i in range(10):
    # (but not *too* quick)
    time.sleep(0.5)
    print i
&lt;/code&gt;&lt;/pre&gt;
&lt;h3&gt;An h3 header&lt;/h3&gt;
&lt;p&gt;Now a nested list:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;First, get these ingredients:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;carrots&lt;/li&gt;
&lt;li&gt;celery&lt;/li&gt;
&lt;li&gt;lentils&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Boil some water.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Dump everything in the pot and follow
this algorithm:&lt;/p&gt;
&lt;pre&gt;&lt;code&gt; find wooden spoon
 uncover pot
 stir
 cover pot
 balance wooden spoon precariously on pot handle
 wait 10 minutes
 goto first step (or shut off burner when done)
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Do not bump wooden spoon or it will fall.&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;Notice again how text always lines up on 4-space indents (including
that last line which continues item 3 above).&lt;/p&gt;
&lt;p&gt;Here&apos;s a link to &lt;a href=&quot;http://foo.bar&quot;&gt;a website&lt;/a&gt;, to a &lt;a href=&quot;local-doc.html&quot;&gt;local
doc&lt;/a&gt;, and to a &lt;a href=&quot;#an-h2-header&quot;&gt;section heading in the current
doc&lt;/a&gt;. Here&apos;s a footnote [^1].&lt;/p&gt;
&lt;p&gt;[^1]: Footnote text goes here.&lt;/p&gt;
&lt;p&gt;Tables can look like this:&lt;/p&gt;
&lt;p&gt;size material color&lt;/p&gt;
&lt;hr /&gt;
&lt;p&gt;9 leather brown
10 hemp canvas natural
11 glass transparent&lt;/p&gt;
&lt;p&gt;Table: Shoes, their sizes, and what they&apos;re made of&lt;/p&gt;
&lt;p&gt;(The above is the caption for the table.) Pandoc also supports
multi-line tables:&lt;/p&gt;
&lt;hr /&gt;
&lt;p&gt;keyword text&lt;/p&gt;
&lt;hr /&gt;
&lt;p&gt;red Sunsets, apples, and
other red or reddish
things.&lt;/p&gt;
&lt;p&gt;green Leaves, grass, frogs
and other things it&apos;s
not easy being.&lt;/p&gt;
&lt;hr /&gt;
&lt;p&gt;A horizontal rule follows.&lt;/p&gt;
&lt;hr /&gt;
&lt;p&gt;Here&apos;s a definition list:&lt;/p&gt;
&lt;p&gt;apples
: Good for making applesauce.
oranges
: Citrus!
tomatoes
: There&apos;s no &quot;e&quot; in tomatoe.&lt;/p&gt;
&lt;p&gt;Again, text is indented 4 spaces. (Put a blank line between each
term/definition pair to spread things out more.)&lt;/p&gt;
&lt;p&gt;Here&apos;s a &quot;line block&quot;:&lt;/p&gt;
&lt;p&gt;| Line one
| Line too
| Line tree&lt;/p&gt;
&lt;p&gt;and images can be specified like so:&lt;/p&gt;
&lt;p&gt;Inline math equations go in like so: $\omega = d\phi / dt$. Display
math should get its own line and be put in in double-dollarsigns:&lt;/p&gt;
&lt;p&gt;$$I = \int \rho R^{2} dV$$&lt;/p&gt;
&lt;p&gt;$$
\begin{equation*}
\pi
=3.1415926535
;8979323846;2643383279;5028841971;6939937510;5820974944
;5923078164;0628620899;8628034825;3421170679;\ldots
\end{equation*}
$$&lt;/p&gt;
&lt;p&gt;And note that you can backslash-escape any punctuation characters
which you wish to be displayed literally, ex.: `foo`, *bar*, etc.&lt;/p&gt;
</content:encoded></item><item><title>Include Video in the Posts</title><link>https://fuwari.vercel.app/posts/video/</link><guid isPermaLink="true">https://fuwari.vercel.app/posts/video/</guid><description>This post demonstrates how to include embedded video in a blog post.</description><pubDate>Tue, 01 Aug 2023 00:00:00 GMT</pubDate><content:encoded>&lt;p&gt;Just copy the embed code from YouTube or other platforms, and paste it in the markdown file.&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;---
title: Include Video in the Post
published: 2023-10-19
// ...
---

&amp;lt;iframe width=&quot;100%&quot; height=&quot;468&quot; src=&quot;https://www.youtube.com/embed/5gIf0_xpFPI?si=N1WTorLKL0uwLsU_&quot; title=&quot;YouTube video player&quot; frameborder=&quot;0&quot; allowfullscreen&amp;gt;&amp;lt;/iframe&amp;gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;h2&gt;YouTube&lt;/h2&gt;
&lt;p&gt;&amp;lt;iframe width=&quot;100%&quot; height=&quot;468&quot; src=&quot;https://www.youtube.com/embed/5gIf0_xpFPI?si=N1WTorLKL0uwLsU_&quot; title=&quot;YouTube video player&quot; frameborder=&quot;0&quot; allow=&quot;accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share&quot; allowfullscreen&amp;gt;&amp;lt;/iframe&amp;gt;&lt;/p&gt;
&lt;h2&gt;Bilibili&lt;/h2&gt;
&lt;p&gt;&amp;lt;iframe width=&quot;100%&quot; height=&quot;468&quot; src=&quot;//player.bilibili.com/player.html?bvid=BV1fK4y1s7Qf&amp;amp;p=1&quot; scrolling=&quot;no&quot; border=&quot;0&quot; frameborder=&quot;no&quot; framespacing=&quot;0&quot; allowfullscreen=&quot;true&quot;&amp;gt; &amp;lt;/iframe&amp;gt;&lt;/p&gt;
</content:encoded></item></channel></rss>