feat: Add support for unknown languages & style: Update code line for… #306
Conversation
📦 Next.js Bundle Analysis for ShiroThis analysis was generated by the Next.js Bundle Analysis action. 🤖
|
| Page | Size (compressed) |
|---|---|
global |
86.89 KB (🟡 +2.28 KB) |
Details
The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.
Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis
If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!
📦 Next.js Bundle Analysis for ShiroThis analysis was generated by the Next.js Bundle Analysis action. 🤖
|
| Page | Size (compressed) |
|---|---|
global |
86.89 KB (🟡 +2.28 KB) |
Details
The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.
Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis
If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!
1 similar comment
📦 Next.js Bundle Analysis for ShiroThis analysis was generated by the Next.js Bundle Analysis action. 🤖
|
| Page | Size (compressed) |
|---|---|
global |
86.89 KB (🟡 +2.28 KB) |
Details
The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.
Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis
If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!
|
我不想全部导入 shiki 的语言支持，因为包体积过大。 既然这样我又想对其他语言高亮做支持所以选了这种的方案，fallback 到老的 prism 高亮，这是一个纯 cdn 的方案不用考虑包大小。 |
唔，原来有这种的考虑在。不过对我而言，我感觉我不太会纠结这 8MB 的体积？也可能是我没有概念xd 那我先更改回原先的判断模式，然后再在自己的博客下切换到全 Shiki 吧。 |
📦 Next.js Bundle Analysis for ShiroThis analysis was generated by the Next.js Bundle Analysis action. 🤖 🎉 Global Bundle Size Decreased
DetailsThe global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster. Any third party scripts you have added directly to your app using the If you want further insight into what is behind the changes, give @next/bundle-analyzer a try! |
|
@Innei Revert 了，但我还是想问下，如果我想完整的切换到 Shiki 的代码高亮，我应当怎么修改 Shiki.tsx 呢？ 是直接将 langs:[...] 改成 langs: ()=>import('shiki/langs.mjs') 吗？ |
你可以试一下，8M 还是很大的。。。 |
我看 Shiki 也可以 cdn 导入啊？ https://shiki-zh-docs.vercel.app/guide/install#%E4%BD%BF%E7%94%A8-cdn |
…matting
Description
通过
bundledLanguages来获取 Shiki 支持的全部语言，Ref: shikijs/shiki#583对于不支持的语言，在使用 Shiki 渲染前，设置语言为空，这会触发 plain text 渲染。但是保持语言标签的传递：
移除了代码渲染组件的判断，这可能需要进一步的代码删除工作。
修了代码行的 padding 位置，从而使得滚动条不再触碰边界：
Before:
After:
不过还发现了一个新问题，现在右侧语言 TAG 是不是有遮挡的问题（下个 commit 加个 z-index）Fixed.：Linked Issues
Additional context
另外还有个问题，我感觉现有的动态导入 shiki 的对应 mjs 是不是有点太繁琐了，能否自动导入所有 shiki 可用的 mjs 呢？