为什么切换了`src/app/favicon.ico`的图标，还是没有效果 #133

M0rtzz · 2024-05-25T12:38:38Z

另外，请问public/icon下的：
android-chrome-192x192.png apple-touch-icon.png favicon-32x32.png
android-chrome-512x512.png favicon-16x16.png
都是干什么的，谢谢

The text was updated successfully, but these errors were encountered:

M0rtzz · 2024-05-25T12:42:41Z

另外，请问public/icon下的： android-chrome-192x192.png apple-touch-icon.png favicon-32x32.png android-chrome-512x512.png favicon-16x16.png 都是干什么的，谢谢

切换了之后执行了以下命令：
npm run dev
并在本地进行调试

zhangyu1818 · 2024-05-25T12:44:04Z

可能有缓存，把项目里的.next文件夹删掉，切到隐私窗口看看。

这几个是不同设备用的图标，比如把网址添加到手机主界面的图标。

M0rtzz · 2024-05-25T12:45:26Z

可能有缓存，把项目里的.next文件夹删掉，切到隐私窗口看看。

这几个是不同设备用的图标，比如把网址添加到手机主界面的图标。

好的，我试一下

M0rtzz · 2024-05-25T12:55:30Z

可能有缓存，把项目里的.next文件夹删掉，切到隐私窗口看看。

这几个是不同设备用的图标，比如把网址添加到手机主界面的图标。

解决了，请问这个Tags里的标签，怎么做到像您自己的博客那样点击进入之后只显示关于这个标签的文章呢

zhangyu1818 · 2024-05-25T12:59:43Z

发表discussion的时候，在右边选择对应的Labels就行了，Tag进去列表的内容是根据这个Label来查询的

M0rtzz · 2024-05-25T13:06:34Z

发表discussion的时候，在右边选择对应的Labels就行了，Tag进去列表的内容是根据这个Label来查询的

好的，感谢您的回复

M0rtzz · 2024-05-25T16:23:13Z

发表discussion的时候，在右边选择对应的Labels就行了，Tag进去列表的内容是根据这个Label来查询的

大佬😭，为什么我本地run dev测试的时候可以正常使用评论功能，但是部署到阿里云服务器之后使用评论功能那个登录github会报错404 not found[难过]

zhangyu1818 · 2024-05-26T04:58:55Z

不清楚哦，你仓库改过名字吗，最好把报错贴上来看看

M0rtzz · 2024-05-26T07:26:15Z

不清楚哦，你仓库改过名字吗，最好把报错贴上来看看

那个云服务器我准备先放一放，现在用vercel构建的时候报错了（我把讨论#1和#2删了，现在只有一个讨论3）：

您看是因为什么问题导致渲染出错了

M0rtzz · 2024-05-26T07:27:37Z

不清楚哦，你仓库改过名字吗，最好把报错贴上来看看

那个云服务器我准备先放一放，现在用vercel构建的时候报错了（我把讨论#1和#2删了，现在只有一个讨论3）：

您看是因为什么问题导致渲染出错了

测试的时候点击那篇文章终端也是报这个错：

M0rtzz · 2024-05-26T07:30:03Z

不清楚哦，你仓库改过名字吗，最好把报错贴上来看看

那个云服务器我准备先放一放，现在用vercel构建的时候报错了（我把讨论#1和#2删了，现在只有一个讨论3）：

您看是因为什么问题导致渲染出错了

测试的时候点击那篇文章终端也是报这个错：

markdown代码如下：

environment_configuration.md

zhangyu1818 · 2024-05-26T07:50:41Z

你可以注意下报错信息内有一个

loc: { line: 48, colunm: 23}

然后去看看markdown文件的48行23列，这里是

{**==Updating==**}

这里在MDX里不是很合法，MDX里{}可以用来读取变量，具体可以看此处文档。

要解决这个报错，需要把{}给替换成其他的，或者转义一下\{**==Updating==**\}。

如果MDX对你来说不是很合适，你可以尝试用基础的markdown-it或者unifiedjs来替换src/markdown/markdown.tsx的markdown渲染。

M0rtzz · 2024-05-26T07:54:00Z

你可以注意下报错信息内有一个
loc: { line: 48, colunm: 23}
然后去看看markdown文件的48行23列，这里是
{**==Updating==**}
这里在MDX里不是很合法，MDX里{}可以用来读取变量，具体可以看此处文档。

要解决这个报错，需要把{}给替换成其他的，或者转义一下\{**==Updating==**\}。

如果MDX对你来说不是很合适，你可以尝试用基础的markdown-it或者unifiedjs来替换src/markdown/markdown.tsx的markdown渲染。

哦哦，非常感谢您的答复，我看您在b站评论中说不能有HTML注释，那请问代码块中的HTML也不能有注释吗？

zhangyu1818 · 2024-05-26T07:59:14Z

代码块里不影响，代码块格式化高亮之类的渲染是由shiki处理的。

还有不用这么客气😂

M0rtzz · 2024-05-26T08:05:44Z

代码块里不影响，代码块格式化高亮之类的渲染是由shiki处理的。

还有不用这么客气😂

好的好的，谢谢啦：）

M0rtzz · 2024-05-26T08:14:16Z

代码块里不影响，代码块格式化高亮之类的渲染是由shiki处理的。

还有不用这么客气😂

右边这个目录有些标题点击会报错，有些则正常跳转是怎么回事

M0rtzz · 2024-05-26T08:33:14Z

代码块里不影响，代码块格式化高亮之类的渲染是由shiki处理的。
还有不用这么客气😂

右边这个目录有些标题点击会报错，有些则正常跳转是怎么回事

好像标题里有英文句号 . 的都不行

zhangyu1818 · 2024-05-26T09:08:23Z

@M0rtzz 我看了一下

第一点，如果有标题是下面这种

##  1. <a name=''></a>注意

正文中会解析成1-注意，右边列表会解析成1-a-name-a注意，两边解析的方法不一样，匹配不上。

第二点就是数字开头的id比如1-注意，querySelector选不了，所以报错了🥲

第一点解决不了，建议不要加标签，现在这个里面有一个插件是rehype-autolink-headings，它会自动创建id链接。

第二点把package.json里的react-markdown-toc升级到1.2.0就可以了。你也可以移除正文中的数字序号，在右边的TOC列表可以为ul标签添加CSS属性list-style: decimal;可以自动加序号。

M0rtzz · 2024-05-26T09:27:19Z

@M0rtzz 我看了一下

第一点，如果有标题是下面这种
##  1. <a name=''></a>注意
正文中会解析成1-注意，右边列表会解析成1-a-name-a注意，两边解析的方法不一样，匹配不上。

第二点就是数字开头的id比如1-注意，querySelector选不了，所以报错了🥲

第一点解决不了，建议不要加标签，现在这个里面有一个插件是rehype-autolink-headings，它会自动创建id链接。

第二点把package.json里的react-markdown-toc升级到1.2.0就可以了。

好的好的，我试一下，：）

M0rtzz · 2024-05-26T11:53:12Z

@M0rtzz 我看了一下

第一点，如果有标题是下面这种
##  1. <a name=''></a>注意
正文中会解析成1-注意，右边列表会解析成1-a-name-a注意，两边解析的方法不一样，匹配不上。

第二点就是数字开头的id比如1-注意，querySelector选不了，所以报错了🥲

第一点解决不了，建议不要加标签，现在这个里面有一个插件是rehype-autolink-headings，它会自动创建id链接。

第二点把package.json里的react-markdown-toc升级到1.2.0就可以了。你也可以移除正文中的数字序号，在右边的TOC列表可以为ul标签添加CSS属性list-style: decimal;可以自动加序号。

大佬，请问怎么设置默认为浅色主题呢

zhangyu1818 · 2024-05-26T13:18:15Z

主题的颜色默认是根据设备系统主题色确定的，不支持手动设置哦

M0rtzz · 2024-05-26T13:38:46Z

主题的颜色默认是根据设备系统主题色确定的，不支持手动设置哦

好的好的，谢谢🥳🥳

M0rtzz · 2024-05-26T14:19:51Z

主题的颜色默认是根据设备系统主题色确定的，不支持手动设置哦

这个profile在电脑显示正好装的下：

但是手机就溢出来了：

这个除了减少字数，有解决的办法吗？🤔

zhangyu1818 · 2024-05-26T15:21:55Z

你可以在手机端把它变的更长，在src/components/blocks/bio.tsx。

现在是row-span-2占2行，你可以改成row-span-3占3行。

M0rtzz · 2024-05-26T15:54:36Z

你可以在手机端把它变的更长，在src/components/blocks/bio.tsx。

现在是row-span-2占2行，你可以改成row-span-3占3行。

好的好的，我明天试一下🥳

M0rtzz · 2024-05-27T03:49:17Z

你可以在手机端把它变的更长，在src/components/blocks/bio.tsx。

现在是row-span-2占2行，你可以改成row-span-3占3行。

user root;
worker_processes auto;
pid /run/nginx.pid;
include /etc/nginx/modules-enabled/*.conf;

events {
	worker_connections 768;
}

http {
	client_max_body_size 1024M; #上传文件大小限制

	sendfile on; #设置为on表示启动高效传输文件的模式

	keepalive_timeout 1800;#保持连接的时间，默认65s

	tcp_nopush on;
	tcp_nodelay on;
	# keepalive_timeout 65;
	types_hash_max_size 2048;
	# server_tokens off;

	include /etc/nginx/mime.types;
	default_type application/octet-stream;

	ssl_protocols TLSv1 TLSv1.1 TLSv1.2 TLSv1.3; # Dropping SSLv3, ref: POODLE
	ssl_prefer_server_ciphers on;

	access_log /var/log/nginx/access.log;
	error_log /var/log/nginx/error.log;

	gzip on;

	include /etc/nginx/conf.d/*.conf;
	include /etc/nginx/sites-enabled/*;

server {
	listen 80;
	server_name X.X.X.X;

	location / {
		root /root/Web/m0rtzz.blog/out;
		index index.html;
		# try_files $uri $uri/ /index.html;
	}

	error_page 500 502 503 504 /50x.html; # 错误页面
}
}

大佬这个是我的nginx.conf，try_files $uri $uri/ /index.html;这句加和不加的区别是：
不加的时候，选择一个博文的read more右键新标签页打开和使用评论功能都会报错404 NOT FOUND:

zhangyu1818 · 2024-05-27T04:31:43Z

index index.html;

首页收到index.html后，因为是nextjs写的，切换/b，不会再访问/b.html，前端路由控制了，但是新tab要访问/b.html，找不到所以404。

try_files $uri $uri/ /index.html;

这个是普通SPA项目用的，首页收到index.html后，新建tab跳到/b，nginx找不到/b/index.html，所以会返回首页的index.html，前端拿到这个以后再做前端渲染成/b的页面

这个是nextjs ssg的项目，每个页面都有html，要用下面这个才对

try_files $uri $uri.html $uri/ /404.html;

至于为什么，你可以观察一下打包出来的out文件夹，里面的路径是/posts/all.html，不是/posts/all/index.html

与项目无关的问题你可以先网上搜一下答案🤔

M0rtzz · 2024-05-27T05:52:02Z

index index.html;
首页收到index.html后，因为是nextjs写的，切换/b，不会再访问/b.html，前端路由控制了，但是新tab要访问/b.html，找不到所以404。
try_files $uri $uri/ /index.html;
这个是普通SPA项目用的，首页收到index.html后，新建tab跳到/b，nginx找不到/b/index.html，所以会返回首页的index.html，前端拿到这个以后再做前端渲染成/b的页面

这个是nextjs ssg的项目，每个页面都有html，要用下面这个才对
try_files $uri $uri.html $uri/ /404.html;
至于为什么，你可以观察一下打包出来的out文件夹，里面的路径是/posts/all.html，不是/posts/all/index.html

与项目无关的问题你可以先网上搜一下答案🤔

好的好的，我以后注意，麻烦了大佬，我上完课试一下
👉🏻👈🏻

M0rtzz · 2024-05-27T12:58:30Z

index index.html;
首页收到index.html后，因为是nextjs写的，切换/b，不会再访问/b.html，前端路由控制了，但是新tab要访问/b.html，找不到所以404。
try_files $uri $uri/ /index.html;
这个是普通SPA项目用的，首页收到index.html后，新建tab跳到/b，nginx找不到/b/index.html，所以会返回首页的index.html，前端拿到这个以后再做前端渲染成/b的页面

这个是nextjs ssg的项目，每个页面都有html，要用下面这个才对
try_files $uri $uri.html $uri/ /404.html;
至于为什么，你可以观察一下打包出来的out文件夹，里面的路径是/posts/all.html，不是/posts/all/index.html

与项目无关的问题你可以先网上搜一下答案🤔

大佬，这个代码块可以添加复制按钮吗🤔

zhangyu1818 · 2024-06-08T14:45:14Z

行号不知道是怎么回事，另外两个问题我改了下，你可以看下我提交的代码。

e85b62f

dc19539

M0rtzz · 2024-06-08T15:09:02Z

行号不知道是怎么回事，另外两个问题我改了下，你可以看下我提交的代码。

e85b62f

dc19539

好的，我再研究一下

M0rtzz · 2024-06-09T04:11:18Z

行号不知道是怎么回事，另外两个问题我改了下，你可以看下我提交的代码。

e85b62f

dc19539

这些警告框里的代码块好像无法进行滚动，会直接越界：

zhangyu1818 · 2024-06-10T08:46:13Z

单独针对这块儿改一下css就好了

M0rtzz · 2024-06-17T10:49:59Z

单独针对这块儿改一下css就好了

请问posts的排序怎么按照发布时间排序，而不是修改时间，谢谢

M0rtzz · 2024-06-18T02:35:38Z

单独针对这块儿改一下css就好了

因TOC过长，我添加了滚动条：

css

.sticky-table {
  max-height: 80vh;
  overflow-y: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

page.tsx

<aside className='sticky-table sticky top-20 ml-auto h-fit w-[24ch] max-xl:hidden'>
        <h2 className='mb-4 whitespace-nowrap text-lg font-semibold tracking-wider has-[+ul:empty]:hidden'>
          TABLE OF CONTENTS
        </h2>
        <TOC
          markdown={body!}
          throttleTime={100}
          className='space-y-3 dark:text-color-4'
          ul='pl-6 space-y-2'
          a='data-[active=true]:text-brand dark:data-[active=true]:text-white block text-sm mb-2'
        />
      </aside>

但是外部滚动超过目录范围时，他不会跟随滚动，需要人工滚动到高亮位置：

请问您有好的建议吗

zhangyu1818 · 2024-06-18T03:33:42Z

API search有个orderBy参数，在这儿加一下。
这个是静态的，你可以用折叠的TOC，仓库里有例子。

M0rtzz · 2024-06-18T04:16:12Z

API search有个orderBy参数，在这儿加一下。

这个是静态的，你可以用折叠的TOC，仓库里有例子。

好的好的，我看一下

M0rtzz · 2024-06-18T05:39:50Z

API search有个orderBy参数，在这儿加一下。

这个是静态的，你可以用折叠的TOC，仓库里有例子。

我尝试写了一个组件：

toc.tsx:

'use client'

import { useRouter } from 'next/navigation';

import { type Result } from 'mdast-util-toc'
import { TOC } from 'react-markdown-toc/client'

import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@/components/ui/collapsible'

interface CustomTOCProps {
  tocData: [Result, Map<string, string>]
}

function CustomTOC({ tocData }: CustomTOCProps) {
  const router = useRouter();

  return (
    <TOC
      toc={tocData}
      scrollAlign="center"
      renderList={(children) => (
        <CollapsibleContent className='pl-4 overflow-hidden data-[state=open]:animate-collapsible-down data-[state=closed]:animate-collapsible-up'>
          {children}
        </CollapsibleContent>
      )}
      renderListItem={(children, open) => (
        <Collapsible open={open}>
          {children}
        </Collapsible>
      )}
      renderLink={(children, href, active) => (
        <CollapsibleTrigger>
          <span
            data-active={active}
            role="button"
            onClick={() => {
              router.push(href, { scroll: false });
              const target = document.querySelector(href)
              target?.scrollIntoView({ behavior: 'smooth' })
            }}
          >
            {children}
          </span>
        </CollapsibleTrigger>
      )}
    />
  );
}

export default CustomTOC

page.tsx:

import { fromMarkdown } from 'react-markdown-toc';

import CustomTOC from './toc';

.......................

export default async function Page({ params }: PageProps) {

.................

  const tocData = await fromMarkdown(body!);

....................
      <aside className='sticky top-10 ml-auto h-fit w-[24ch] max-xl:hidden'>
        <h2 className='mb-4 whitespace-nowrap text-lg font-semibold tracking-wider has-[+ul:empty]:hidden'>
          TABLE OF CONTENTS
        </h2>
        <CustomTOC tocData={tocData} />
      </aside>

可是呈现出来的效果和您的 https://zhangyu1818.github.io/react-markdown-toc/对比起来不太好：

首先没有高亮所在标题：

其次标题的折叠不丝滑，很僵硬

请问如何解决，谢谢您

M0rtzz · 2024-06-18T05:46:43Z

API search有个orderBy参数，在这儿加一下。

这个是静态的，你可以用折叠的TOC，仓库里有例子。

我尝试写了一个组件：

toc.tsx:

'use client'

import { TOC } from 'react-markdown-toc/client'
import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@/components/ui/collapsible'
import { useRouter } from 'next/navigation';

interface CustomTOCProps {
  tocData: [any, Map<string, string>];
}

function CustomTOC({ tocData }: CustomTOCProps) {
  const router = useRouter();

  return (
    <TOC
      toc={tocData}
      scrollAlign="start"
      renderList={(children) => (
        <CollapsibleContent className="pl-4 overflow-hidden">
          {children}
        </CollapsibleContent>
      )}
      renderListItem={(children, open) => (
        <Collapsible open={open}>
          {children}
        </Collapsible>
      )}
      renderLink={(children, href, active) => (
        <CollapsibleTrigger>
          <span
            data-active={active}
            role="button"
            onClick={() => {
              router.push(href, { scroll: false });
              const target = document.querySelector(href);
              target?.scrollIntoView({ behavior: 'smooth' });
            }}
          >
            {children}
          </span>
        </CollapsibleTrigger>
      )}
    />
  );
}

export default CustomTOC;

page.tsx:

import { fromMarkdown } from 'react-markdown-toc';

import CustomTOC from './toc';

.......................

export default async function Page({ params }: PageProps) {

.................

  const tocData = await fromMarkdown(body!);

....................
      <aside className='sticky top-10 ml-auto h-fit w-[24ch] max-xl:hidden'>
        <h2 className='mb-4 whitespace-nowrap text-lg font-semibold tracking-wider has-[+ul:empty]:hidden'>
          TABLE OF CONTENTS
        </h2>
        <CustomTOC tocData={tocData} />
      </aside>

可是呈现出来的效果和您的 https://zhangyu1818.github.io/react-markdown-toc/对比起来不太好：

首先没有高亮所在标题：

其次标题的折叠不丝滑，很僵硬

请问如何解决，谢谢您

展开也有点问题，总是会多展开一些标题

M0rtzz · 2024-06-18T06:08:04Z

API search有个orderBy参数，在这儿加一下。

这个是静态的，你可以用折叠的TOC，仓库里有例子。

我尝试写了一个组件：
toc.tsx:

'use client'

import { TOC } from 'react-markdown-toc/client'
import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@/components/ui/collapsible'
import { useRouter } from 'next/navigation';

interface CustomTOCProps {
  tocData: [any, Map<string, string>];
}

function CustomTOC({ tocData }: CustomTOCProps) {
  const router = useRouter();

  return (
    <TOC
      toc={tocData}
      scrollAlign="start"
      renderList={(children) => (
        <CollapsibleContent className="pl-4 overflow-hidden">
          {children}
        </CollapsibleContent>
      )}
      renderListItem={(children, open) => (
        <Collapsible open={open}>
          {children}
        </Collapsible>
      )}
      renderLink={(children, href, active) => (
        <CollapsibleTrigger>
          <span
            data-active={active}
            role="button"
            onClick={() => {
              router.push(href, { scroll: false });
              const target = document.querySelector(href);
              target?.scrollIntoView({ behavior: 'smooth' });
            }}
          >
            {children}
          </span>
        </CollapsibleTrigger>
      )}
    />
  );
}

export default CustomTOC;

page.tsx:

import { fromMarkdown } from 'react-markdown-toc';

import CustomTOC from './toc';

.......................

export default async function Page({ params }: PageProps) {

.................

  const tocData = await fromMarkdown(body!);

....................
      <aside className='sticky top-10 ml-auto h-fit w-[24ch] max-xl:hidden'>
        <h2 className='mb-4 whitespace-nowrap text-lg font-semibold tracking-wider has-[+ul:empty]:hidden'>
          TABLE OF CONTENTS
        </h2>
        <CustomTOC tocData={tocData} />
      </aside>

可是呈现出来的效果和您的 https://zhangyu1818.github.io/react-markdown-toc/对比起来不太好：
首先没有高亮所在标题：

其次标题的折叠不丝滑，很僵硬
请问如何解决，谢谢您

展开也有点问题，总是会多展开一些标题

build时会报错：

zhangyu1818 · 2024-06-18T07:18:47Z

@M0rtzz 你用的是示例仓库里的@radix-ui/react-collapsible库吗？如果是要把这里的TailwindCSS配置也加一下。

M0rtzz · 2024-06-18T07:20:03Z

@M0rtzz 你用的是示例仓库里的@radix-ui/react-collapsible库吗？如果是要把这里的TailwindCSS配置也加一下。

好的，我试一下，错误挺多的现在:(

M0rtzz · 2024-06-19T02:46:18Z

@zhangyu1818 点击目录标题还会报错：

zhangyu1818 · 2024-06-19T02:54:00Z

querySelector不支持数字开头，我之前有回复过

@M0rtzz 我看了一下

第一点，如果有标题是下面这种
##  1. <a name=''></a>注意
正文中会解析成1-注意，右边列表会解析成1-a-name-a注意，两边解析的方法不一样，匹配不上。

第二点就是数字开头的id比如1-注意，querySelector选不了，所以报错了🥲

第一点解决不了，建议不要加标签，现在这个里面有一个插件是rehype-autolink-headings，它会自动创建id链接。

第二点把package.json里的react-markdown-toc升级到1.2.0就可以了。你也可以移除正文中的数字序号，在右边的TOC列表可以为ul标签添加CSS属性list-style: decimal;可以自动加序号。

照这个改，https://github.com/zhangyu1818/react-markdown-toc/blob/main/lib/components/client.tsx#L121-L122

M0rtzz · 2024-06-19T03:53:43Z

querySelector不支持数字开头，我之前有回复过
@M0rtzz 我看了一下
第一点，如果有标题是下面这种
##  1. <a name=''></a>注意
正文中会解析成1-注意，右边列表会解析成1-a-name-a注意，两边解析的方法不一样，匹配不上。
第二点就是数字开头的id比如1-注意，querySelector选不了，所以报错了🥲
第一点解决不了，建议不要加标签，现在这个里面有一个插件是rehype-autolink-headings，它会自动创建id链接。
第二点把package.json里的react-markdown-toc升级到1.2.0就可以了。你也可以移除正文中的数字序号，在右边的TOC列表可以为ul标签添加CSS属性list-style: decimal;可以自动加序号。
照这个改，https://github.com/zhangyu1818/react-markdown-toc/blob/main/lib/components/client.tsx#L121-L122

哦哦，我看一下

M0rtzz · 2024-06-19T04:21:30Z

@zhangyu1818 请问这个编译报这种错如何解决：

是文件目录不对吗，现在正常跳转了，但是没有高亮且折叠僵硬

zhangyu1818 · 2024-06-19T04:52:16Z

你本地debug一下吧，我看图片也不知道是为什么

M0rtzz · 2024-06-19T04:53:50Z

你本地debug一下吧，我看图片也不知道是为什么

好的

M0rtzz · 2024-06-20T06:06:55Z

@zhangyu1818

好像找到了大致的原因，其中一个可能出现报错的是标题中的``局部代码块

比如：

## `test`

这种就会报错。

现在报错解决了，但是对于这种二级标题过多的好像也起不到作用，滑动到靠下的二级标题也还是看不见：

且如果标题长度有差距的话，同级目录距离左边的距离参差不齐：

zhangyu1818 · 2024-06-21T08:05:13Z

参差不齐看上去是因为文本居中对齐了

你可以看一些别的网站如果TOC太长是如何解决的，我目前还没遇到过这种问题。

M0rtzz · 2024-06-23T05:53:29Z

@zhangyu1818 大佬请问您有计划加入latex内联公式和公式块的渲染功能吗

zhangyu1818 · 2024-06-25T02:37:39Z

@M0rtzz 我没这个需求哈，你可以往markdown组件里remarkPlugins加一个remark-math，对着配一下CSS，就可以渲染数学公式了。

M0rtzz · 2024-06-25T02:38:44Z

@M0rtzz 我没这个需求哈，你可以往markdown组件里remarkPlugins加一个remark-math，对着配一下CSS，就可以渲染数学公式了。

好的，我看一下🥳

M0rtzz · 2024-07-21T07:08:46Z

@zhangyu1818

请问您能提供一下https://www.zhangyu.dev/posts/135的原始markdown文件吗，想看一下语法，谢谢

limuen · 2024-07-22T11:52:06Z

你可以注意下报错信息内有一个
loc: { line: 48, colunm: 23}
然后去看看markdown文件的48行23列，这里是
{**==Updating==**}
这里在MDX里不是很合法，MDX里{}可以用来读取变量，具体可以看此处文档。
要解决这个报错，需要把{}给替换成其他的，或者转义一下\{**==Updating==**\}。
如果MDX对你来说不是很合适，你可以尝试用基础的markdown-it或者unifiedjs来替换src/markdown/markdown.tsx的markdown渲染。
哦哦，非常感谢您的答复，我看您在b站评论中说不能有HTML注释，那请问代码块中的HTML也不能有注释吗？

能发个b站的链接吗？

zhangyu1818 · 2024-07-22T12:19:39Z

@M0rtzz

## MDX components

### Code Group

<CodeGroup >

```ts blog-config.ts
export const repoName = 'blog'
export const repoOwner = 'zhangyu1818'
export const site = 'https://zhangyu.dev'
```

```yml graphql.config.yml
schema:
  - https://api.github.com/graphql:
      headers:
        Authorization: Bearer ${GITHUB_TOKEN}
documents: '**/*.ts'
```

</CodeGroup>

### Details

<Details summary="Details">

Details Block

````md
<Details summary="Details">

Details Block

```yml graphql.config.yml
schema:
  - https://api.github.com/graphql:
      headers:
        Authorization: Bearer ${GITHUB_TOKEN}
documents: '**/*.ts'
```

Details block is a collapsible component.

</Details>
````

Details block is a collapsible component.

</Details>

### Github Alerts

> [!NOTE]
> Useful information that users should know, even when skimming content.

> [!TIP]
> Helpful advice for doing things better or more easily.

> [!IMPORTANT]
> Key information users need to know to achieve their goal.

> [!WARNING]
> Urgent info that needs immediate user attention to avoid problems.

> [!CAUTION]
> Advises about risks or negative outcomes of certain actions.

## Shiki

### Twoslash

```ts twoslash
// @errors: 2540
interface Todo {
  title: string
}

const todo: Readonly<Todo> = {
  title: 'Delete inactive users'.toUpperCase(),
  //  ^?
}

todo.title = 'Hello'

Number.parseInt('123', 10)
//      ^|




```

```ts twoslash
// @log: Custom log message
const a = 1
// @error: Custom error message
const b = 1
// @warn: Custom warning message
const c = 1
// @annotate: Custom annotation message
```

---

### Shiki Transformers

#### `transformerNotationDiff`

```ts
console.log('hewwo') // [!code --]
console.log('hello') // [!code ++]
console.log('goodbye')
```

---

#### `transformerNotationHighlight`

```ts
console.log('Not highlighted')
console.log('Highlighted') // [!code highlight]
console.log('Not highlighted')
```

```ts
// [!code highlight:3]
console.log('Highlighted')
console.log('Highlighted')
console.log('Not highlighted')
```

---

#### `transformerNotationWordHighlight`

```ts
// [!code word:Hello]
const message = 'Hello World'
console.log(message) // prints Hello World
```

```ts
// [!code word:Hello:1]
const message = 'Hello World'
console.log(message) // prints Hello World
```

---

#### `transformerNotationFocus`

```ts
console.log('Not focused')
console.log('Focused') // [!code focus]
console.log('Not focused')
```

```ts
// [!code focus:3]
console.log('Focused')
console.log('Focused')
console.log('Not focused')
```

---

#### `transformerNotationErrorLevel`

```ts
console.log('No errors or warnings')
console.error('Error') // [!code error]
console.warn('Warning') // [!code warning]
```

---

#### `transformerMetaHighlight`

```js {1,3-4}
console.log('1')
console.log('2')
console.log('3')
console.log('4')
```

#### `transformerMetaWordHighlight`

```js /Hello/
const msg = 'Hello World'
console.log(msg) // prints Hello World
```

M0rtzz · 2024-07-23T06:35:37Z

@M0rtzz

## MDX components

### Code Group

<CodeGroup >

```ts blog-config.ts
export const repoName = 'blog'
export const repoOwner = 'zhangyu1818'
export const site = 'https://zhangyu.dev'

schema:
  - https://api.github.com/graphql:
      headers:
        Authorization: Bearer ${GITHUB_TOKEN}
documents: '**/*.ts'

Details

Details Block

<Details summary="Details">

Details Block

```yml graphql.config.yml
schema:
  - https://api.github.com/graphql:
      headers:
        Authorization: Bearer ${GITHUB_TOKEN}
documents: '**/*.ts'
```

Details block is a collapsible component.

</Details>

Details block is a collapsible component.

Github Alerts

[!NOTE]
Useful information that users should know, even when skimming content.

[!TIP]
Helpful advice for doing things better or more easily.

[!IMPORTANT]
Key information users need to know to achieve their goal.

[!WARNING]
Urgent info that needs immediate user attention to avoid problems.

[!CAUTION]
Advises about risks or negative outcomes of certain actions.

Shiki

Twoslash

// @errors: 2540
interface Todo {
  title: string
}

const todo: Readonly<Todo> = {
  title: 'Delete inactive users'.toUpperCase(),
  //  ^?
}

todo.title = 'Hello'

Number.parseInt('123', 10)
//      ^|

// @log: Custom log message
const a = 1
// @error: Custom error message
const b = 1
// @warn: Custom warning message
const c = 1
// @annotate: Custom annotation message

Shiki Transformers

`transformerNotationDiff`

console.log('hewwo') // [!code --]
console.log('hello') // [!code ++]
console.log('goodbye')

`transformerNotationHighlight`

console.log('Not highlighted')
console.log('Highlighted') // [!code highlight]
console.log('Not highlighted')

// [!code highlight:3]
console.log('Highlighted')
console.log('Highlighted')
console.log('Not highlighted')

`transformerNotationWordHighlight`

// [!code word:Hello]
const message = 'Hello World'
console.log(message) // prints Hello World

// [!code word:Hello:1]
const message = 'Hello World'
console.log(message) // prints Hello World

`transformerNotationFocus`

console.log('Not focused')
console.log('Focused') // [!code focus]
console.log('Not focused')

// [!code focus:3]
console.log('Focused')
console.log('Focused')
console.log('Not focused')

`transformerNotationErrorLevel`

console.log('No errors or warnings')
console.error('Error') // [!code error]
console.warn('Warning') // [!code warning]

`transformerMetaHighlight`

console.log('1')
console.log('2')
console.log('3')
console.log('4')

`transformerMetaWordHighlight`

const msg = 'Hello World'
console.log(msg) // prints Hello World

谢谢您

M0rtzz · 2024-08-26T08:54:48Z

@zhangyu1818

这种 transformerNotationDiff ，如果添加了一个空行，如上图红色框，它就不会显示

zhangyu1818 · 2024-08-29T09:05:47Z

先看看是Shiki不支持，还是样式没加上

M0rtzz closed this as completed May 27, 2024

为什么切换了src/app/favicon.ico的图标，还是没有效果 #133

为什么切换了src/app/favicon.ico的图标，还是没有效果 #133

Comments

M0rtzz commented May 25, 2024

M0rtzz commented May 25, 2024

zhangyu1818 commented May 25, 2024

M0rtzz commented May 25, 2024

M0rtzz commented May 25, 2024

zhangyu1818 commented May 25, 2024

M0rtzz commented May 25, 2024

M0rtzz commented May 25, 2024

zhangyu1818 commented May 26, 2024

M0rtzz commented May 26, 2024

M0rtzz commented May 26, 2024

M0rtzz commented May 26, 2024

zhangyu1818 commented May 26, 2024

M0rtzz commented May 26, 2024

zhangyu1818 commented May 26, 2024

M0rtzz commented May 26, 2024

M0rtzz commented May 26, 2024

M0rtzz commented May 26, 2024

zhangyu1818 commented May 26, 2024 • edited Loading

M0rtzz commented May 26, 2024

M0rtzz commented May 26, 2024

zhangyu1818 commented May 26, 2024

M0rtzz commented May 26, 2024

M0rtzz commented May 26, 2024

zhangyu1818 commented May 26, 2024

M0rtzz commented May 26, 2024

M0rtzz commented May 27, 2024

zhangyu1818 commented May 27, 2024

M0rtzz commented May 27, 2024

M0rtzz commented May 27, 2024

zhangyu1818 commented Jun 8, 2024 • edited Loading

M0rtzz commented Jun 8, 2024

M0rtzz commented Jun 9, 2024

zhangyu1818 commented Jun 10, 2024

M0rtzz commented Jun 17, 2024

M0rtzz commented Jun 18, 2024

zhangyu1818 commented Jun 18, 2024

M0rtzz commented Jun 18, 2024

M0rtzz commented Jun 18, 2024 • edited Loading

M0rtzz commented Jun 18, 2024 • edited Loading

M0rtzz commented Jun 18, 2024

zhangyu1818 commented Jun 18, 2024

M0rtzz commented Jun 18, 2024

M0rtzz commented Jun 19, 2024

zhangyu1818 commented Jun 19, 2024

M0rtzz commented Jun 19, 2024

M0rtzz commented Jun 19, 2024 • edited Loading

zhangyu1818 commented Jun 19, 2024

M0rtzz commented Jun 19, 2024

M0rtzz commented Jun 20, 2024 • edited Loading

zhangyu1818 commented Jun 21, 2024

M0rtzz commented Jun 23, 2024 • edited Loading

zhangyu1818 commented Jun 25, 2024

M0rtzz commented Jun 25, 2024

M0rtzz commented Jul 21, 2024

limuen commented Jul 22, 2024

zhangyu1818 commented Jul 22, 2024 • edited Loading

M0rtzz commented Jul 23, 2024

Details

Github Alerts

Shiki

Twoslash

Shiki Transformers

transformerNotationDiff

transformerNotationHighlight

transformerNotationWordHighlight

transformerNotationFocus

transformerNotationErrorLevel

transformerMetaHighlight

transformerMetaWordHighlight

M0rtzz commented Aug 26, 2024

zhangyu1818 commented Aug 29, 2024

为什么切换了`src/app/favicon.ico`的图标，还是没有效果 #133

为什么切换了`src/app/favicon.ico`的图标，还是没有效果 #133

zhangyu1818 commented May 26, 2024 •

edited

Loading

zhangyu1818 commented Jun 8, 2024 •

edited

Loading

M0rtzz commented Jun 18, 2024 •

edited

Loading

M0rtzz commented Jun 18, 2024 •

edited

Loading

M0rtzz commented Jun 19, 2024 •

edited

Loading

M0rtzz commented Jun 20, 2024 •

edited

Loading

M0rtzz commented Jun 23, 2024 •

edited

Loading

zhangyu1818 commented Jul 22, 2024 •

edited

Loading

`transformerNotationDiff`

`transformerNotationHighlight`

`transformerNotationWordHighlight`

`transformerNotationFocus`

`transformerNotationErrorLevel`

`transformerMetaHighlight`

`transformerMetaWordHighlight`