Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add Mathjax to support LaTeX math formula #268

Merged
merged 2 commits into from
Jul 28, 2021
Merged

Add Mathjax to support LaTeX math formula #268

merged 2 commits into from
Jul 28, 2021

Conversation

vsxd
Copy link
Contributor

@vsxd vsxd commented Apr 30, 2020 •
edited
Loading

According to 给Hexo主题添加LaTeX公式支持, I added mathjax.ejs, modified post.ejs and appended configurations to _config.yml. I also added some brief instructions to README.

@LolipopJ
Copy link
Collaborator

LolipopJ commented May 25, 2021 •
edited
Loading

Hexo 博客预设的 hexo-renderer-marked 是官方活跃维护的渲染 md 文档的仓库，但对 LaTeX 渲染支持不全。

很多技术博客都提到了 NexT 主题推荐使用 hexo-renderer-kramed 渲染 LaTeX。但实际上，现在 NexT 主题推荐使用另一个 md 渲染库 hexo-renderer-pandoc。

If you use MathJax to render Math Equations, you need to use one of them: hexo-renderer-pandoc or hexo-renderer-kramed (Not recommended) as the renderer for Markdown.

因此，或许可以考虑将依赖中的 hexo-renderer-kramed 库换成更推荐的 hexo-renderer-pandoc 库。

看了下源码，hexo-renderer-pandoc 库没有任何依赖，直接作为拓展注入到 Hexo 中。

如果能实现相同的功能，hexo-renderer-pandoc 确实是更优先的选择。

嗨，我研究了一下 LaTeX 数学公式渲染的问题，正如这篇 Wiki 所说：

事实上启用对 Latex 的支持是 Hexo 的一项功能，而与 archer 无关。

如果博客主题的用户需要，可以参考相关的技术博客手动配置 MathJax 支持。理由有如下几条：

  • 渲染博客的权利在 Hexo 身上，而不在 Archer 主题身上。
  • hexo-renderer-kramed 自 hexo-renderer-marked 库 fork 而来，hexo-renderer-marked 库仍在活跃维护中，有许多前者不具备的新特性。用户是否应该更换渲染引擎有待斟酌。
  • 为了渲染 LaTeX 数学公式，可以在 Hexo 配置使用 hexo-math，实现服务端渲染而无需依赖客户端，因此也不必在 Archer 主题中引入 MathJax 的 JavaScript 依赖。

以上是我的一家之见，从我的角度来说，我可能将拒绝合并这个 PR。作为支持 LaTeX 数学公式的实现，我更倾向于将它作为一篇 Wiki 供人查阅。

或者，您也许会有一些其它的看法，欢迎提出来一起探讨！

@LolipopJ LolipopJ mentioned this pull request Jun 29, 2021
Open
12 tasks
LolipopJ added a commit that referenced this pull request Jul 18, 2021
@LolipopJ
feat(MathJax): add MathJax support
6edd6d9 
Thanks to #268

Here I modify MathJax support doc for better performance.

Also fix polyfill support of Algolia and MathJax.
@LolipopJ
Copy link
Collaborator

Hi，我又又重新研究了一下引入 MathJax 作为 LaTeX 数学公式的问题，考虑到 hexo-math 渲染出来的结果是一张 SVG 图片，而只有引入 MathJax 库并进行适配，才能获得完整的数学公式支持。

因此我将您的 PR 合并到了 dev-1.6.3 分支上，并更新了相应的文档和 Wiki 内容。

再一次，感谢您的贡献！❤️

@LolipopJ LolipopJ mentioned this pull request Jul 24, 2021
Merged
LolipopJ added a commit that referenced this pull request Jul 28, 2021
@LolipopJ
Merge pull request #305 from fi3ework/dev-1.6.3
e43746b 
🛎️ One-click translation by Google. [中文更新内容](#305

## Merge PR

Merged #268 and #300.

## Feature

- Added **Dark mode** support, and can be switched by the button at \<header \/\>.
  Regarding the mode switch button, considering that the user is less likely to use it after use, it is put together with the link back to the home page and disappears after scrolling. In the future, you can put the same less frequently used search button or other helpful things here.
- Add **MathJax mathematical formula** support, and update related documents (#266).
- Added **Mermaid chart** support (#186).
- Add support for the personal information `sticky` of the homepage to scroll with the page (#202).
-Now you can set the category information of the corresponding article to be displayed on the homepage and article page (#188).
- It is now possible to hide the catalog of specific articles (#244).

## Change

- Adapt to Dark mode, adjust the spacing of text `padding`.
- For mobile, when scrolling to the top part of the page, add a dark background to the \<header \/\> part. Helps to avoid buttons being disturbed by page title information.
- The critical point of page scroll switching is selected as the junction of the header image and \<container \/\>.

## Optimization

- Add a fade-in and fade-out animation effect to the floating button.
- Add more configuration content for the timeliness of `outdated_threshold` articles. And keep the style sheet design consistent with the quote block part of the article.
- Add support for Hexo's `comments` property to the article. When set to `false`, the comment plugin will not be displayed for the article.
- When setting the post `sticky` property, the sticky icon will also be displayed.
- The Toc of the article page will be ready sooner.
- Optimize the configuration of Babel and Eslint.

## Fix

- When Algolia is enabled, the unprocessed icon content will no longer be displayed when the page has not been loaded.
- When opening the Algolia search interface, prevent page scrolling.
- Fix the alignment of social icon including Steam icon (#301).

## Chore

- Fixed the code format and indentation of all `.ejs` files in the `layout` directory.
- Use `const` instead of unnecessary `let` in the script file to make the code look more clever.
- Unify most of the CDN links as `cdn.jsdelivr.net`.
- Update third-party dependency packages including jQuery to fix compatibility issues; remove unnecessary or deprecated dependencies.
- Update the warehouse documentation and secondary development documentation.

## Known issues

In dark mode, when switching or refreshing the page, due to the reload of the `layout.ejs` file, the component \<div class="contain" \/\> will cause a short white screen. The expected situation is that in Dark mode, set its background color to dark before loading (such as \#121212)
@LolipopJ LolipopJ merged commit 1e899d0 into fi3ework:master Jul 28, 2021
Stark-X pushed a commit to Stark-X/hexo-theme-archer that referenced this pull request Apr 1, 2024
@LolipopJ
feat(MathJax): add MathJax support
750ea14 
Thanks to fi3ework#268

Here I modify MathJax support doc for better performance.

Also fix polyfill support of Algolia and MathJax.
Stark-X pushed a commit to Stark-X/hexo-theme-archer that referenced this pull request Apr 1, 2024
@LolipopJ
Merge pull request fi3ework#305 from fi3ework/dev-1.6.3
8c98574 
🛎️ One-click translation by Google. [中文更新内容](fi3ework#305

## Merge PR

Merged fi3ework#268 and fi3ework#300.

## Feature

- Added **Dark mode** support, and can be switched by the button at \<header \/\>.
  Regarding the mode switch button, considering that the user is less likely to use it after use, it is put together with the link back to the home page and disappears after scrolling. In the future, you can put the same less frequently used search button or other helpful things here.
- Add **MathJax mathematical formula** support, and update related documents (fi3ework#266).
- Added **Mermaid chart** support (fi3ework#186).
- Add support for the personal information `sticky` of the homepage to scroll with the page (fi3ework#202).
-Now you can set the category information of the corresponding article to be displayed on the homepage and article page (fi3ework#188).
- It is now possible to hide the catalog of specific articles (fi3ework#244).

## Change

- Adapt to Dark mode, adjust the spacing of text `padding`.
- For mobile, when scrolling to the top part of the page, add a dark background to the \<header \/\> part. Helps to avoid buttons being disturbed by page title information.
- The critical point of page scroll switching is selected as the junction of the header image and \<container \/\>.

## Optimization

- Add a fade-in and fade-out animation effect to the floating button.
- Add more configuration content for the timeliness of `outdated_threshold` articles. And keep the style sheet design consistent with the quote block part of the article.
- Add support for Hexo's `comments` property to the article. When set to `false`, the comment plugin will not be displayed for the article.
- When setting the post `sticky` property, the sticky icon will also be displayed.
- The Toc of the article page will be ready sooner.
- Optimize the configuration of Babel and Eslint.

## Fix

- When Algolia is enabled, the unprocessed icon content will no longer be displayed when the page has not been loaded.
- When opening the Algolia search interface, prevent page scrolling.
- Fix the alignment of social icon including Steam icon (fi3ework#301).

## Chore

- Fixed the code format and indentation of all `.ejs` files in the `layout` directory.
- Use `const` instead of unnecessary `let` in the script file to make the code look more clever.
- Unify most of the CDN links as `cdn.jsdelivr.net`.
- Update third-party dependency packages including jQuery to fix compatibility issues; remove unnecessary or deprecated dependencies.
- Update the warehouse documentation and secondary development documentation.

## Known issues

In dark mode, when switching or refreshing the page, due to the reload of the `layout.ejs` file, the component \<div class="contain" \/\> will cause a short white screen. The expected situation is that in Dark mode, set its background color to dark before loading (such as \#121212)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@Stark-X Stark-X Awaiting requested review from Stark-X

@LolipopJ LolipopJ Awaiting requested review from LolipopJ

@removeif removeif Awaiting requested review from removeif

Assignees
No one assigned
Labels
enhancement will resolve
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@vsxd @LolipopJ