search

ppoffice / hexo-theme-icarus

A simple, delicate, and modern theme for the static site generator Hexo.
https://ppoffice.github.io/hexo-theme-icarus/
MIT License
6.28k stars 1.53k forks source link

MathJax affects GitHub Gist #915

Closed ZodmanPerth closed 2 years ago

ZodmanPerth commented 2 years ago

Make sure you go through the Hexo docs, Icarus user manual, and GitHub issues to see if the bug you are reporting has been already addressed by others.

✅

Describe the bug I have MathJax turned on in my config file. When I embed a GitHub Gist in a post, MathJax is applied to the embedded Gist. MathJax should not be applied to the content of the Gist.

System and Environment Hexo version 5.4.0 (commit 2ae643a6) Icarus version 4.2.0 (commit efc756a5)

Site

title: Red Peregrine subtitle: Carl Scarlett's Blog description: Red Peregrine is the blog site of Carl Scarlett author: Carl Scarlett language: en timezone: ''

URL

If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'

url: https://www.redperegrine.net root: / permalink: :title/ permalink_defaults: null

pretty_urls: trailing_index: true trailing_html: true

Directory

source_dir: source public_dir: public tag_dir: tags archive_dir: archives category_dir: categories code_dir: downloads/code i18n_dir: :lang skip_render: null

Writing

new_post_name: :title.md # File name of new posts default_layout: post titlecase: false # Transform title into titlecase external_link: enable: true # Open external links in new tab field: site exclude: '' filename_case: 1 render_drafts: false post_asset_folder: true relative_link: false future: true highlight: enable: true line_number: true auto_detect: false tab_replace: ' ' wrap: false hljs: false prismjs: enable: false preprocess: true line_number: true tab_replace: ''

Home page setting

path: Root path for your blogs index page. (default = '')

per_page: Posts displayed per page. (0 = disable pagination)

order_by: Posts order. (Order by date descending by default)

index_generator: path: '' per_page: 5 order_by: '-date'

Category & Tag

default_category: uncategorized category_map: null tag_map: null meta_generator: true

Date / Time format

Hexo uses Moment.js to parse and display date

You can customize the date format as defined in

http://momentjs.com/docs/#/displaying/format/

date_format: YYYY-MM-DD time_format: HH:mm:ss updated_option: mtime

Pagination

Set per_page to 0 to disable pagination

per_page: 10 pagination_dir: page

Include/Exclude Files or Folders

Use glob expressions to include/exclude additional files

include: null

exclude: null

ignore: null

Extensions

Plugins: https://hexo.io/plugins/

Themes: https://hexo.io/themes/

theme: icarus

RSS

npm install hexo-generator-feed --save

feed: type: atom path: atom.xml limit: 50

hub:

content: content_limit: 280 content_limit_delim: ' ' order_by: -date icon: /img/personal-blog/favicon.svg autodiscovery: false

template:

Deployment

Docs: https://hexo.io/docs/deployment.html

deploy: type: git repo: withheld branch: master

Emojis

https://github.com/crimx/hexo-filter-github-emojis

githubEmojis: enable: true className: github-emoji inject: true unicode: false styles: localEmojis:

Sitemap

https://github.com/ludoviclefevre/hexo-generator-seo-friendly-sitemap

sitemap: path: sitemap.xml


- Theme configuration file `_config.icarus.yml` or `themes/icarus/_config.yml`

Version of the configuration file

version: 4.0.0

Icarus theme variant, can be "default" or "cyberpunk"

variant: default

Path or URL to the website's logo

logo: /img/personal-blog/logo.svg

Page metadata configurations

head:

URL or path to the website's icon

favicon: /img/personal-blog/favicon.svg

# # Web application manifests configuration
# # https://developer.mozilla.org/en-US/docs/Web/Manifest
# manifest:
#     # Name of the web application (default to the site title)
#     name: 
#     # The displayed name of the web application
#     # when there is not enough space to display full name
#     short_name: 
#     # The start URL of the web application
#     start_url: 
#     # The default theme color for the application
#     theme_color: 
#     # A placeholder background color for the application page to display
#     # before its stylesheet is loaded
#     background_color: 
#     # The preferred display mode for the website
#     display: standalone
#     # Image files that can serve as application icons for different contexts
#     icons:
#         -
#             # The path to the image file
#             src: ''
#             # A string containing space-separated image dimensions
#             sizes: ''
#             # A hint as to the media type of the image
#             type: 

# # Open Graph metadata
# # https://hexo.io/docs/helpers.html#open-graph
# open_graph:
#     # Page title (og:title) (optional)
#     # You should leave this blank for most of the time
#     title: 
#     # Page type (og:type) (optional)
#     # You should leave this blank for most of the time
#     type: blog
#     # Page URL (og:url) (optional)
#     # You should leave this blank for most of the time
#     url: 
#     # Page cover (og:image) (optional)
#     # You should leave this blank for most of the time
#     image: 
#     # Site name (og:site_name) (optional)
#     # You should leave this blank for most of the time
#     site_name: 
#     # Page author (article:author) (optional)
#     # You should leave this blank for most of the time
#     author: 
#     # Page description (og:description) (optional)
#     # You should leave this blank for most of the time
#     description: 
#     # Twitter card type (twitter:card)
#     twitter_card: 
#     # Twitter ID (twitter:creator)
#     twitter_id: 
#     # Twitter Site (twitter:site)
#     twitter_site: 
#     # Google+ profile link (deprecated)
#     google_plus: 
#     # Facebook admin ID
#     fb_admins: 
#     # Facebook App ID
#     fb_app_id: 

# Structured data of the page
# https://developers.google.com/search/docs/guides/intro-structured-data
structured_data:
    # Page title (optional)
    # You should leave this blank for most of the time
    title: 
    # Page description (optional)
    # You should leave this blank for most of the time
    description: 
    # Page URL (optional)
    # You should leave this blank for most of the time
    url: 
    # Page author (article:author) (optional)
    # You should leave this blank for most of the time
    author: 
    # Page publisher (optional)
    # You should leave this blank for most of the time
    publisher: 
    # Page publisher logo (optional)
    # You should leave this blank for most of the time
    publisher_logo: 
    # Page images (optional)
    # You should leave this blank for most of the time
    image: 

# Additional HTML meta tags in an array
meta:
    # Meta tag specified in <attribute>=<value> style
    # E.g., name=theme-color;content=#123456 => <meta name="theme-color" content="#123456">
    -  google-site-verification=withheld
    -  rating=safe for kids    # https://developers.google.com/search/docs/advanced/guidelines/google-images#safe_search, https://www.metatags.org/all-meta-tags-overview/meta-name-rating/
# URL or path to the website's RSS atom.xml
rss:

Page top navigation bar configurations

navbar:

Navigation menu items

menu:
    Home: /
    Archives: /archives
    # Categories: /categories
    # Tags: /tags
    About: /about
# Links to be shown on the right of the navigation bar
# links:
#     Download on GitHub:
#         icon: fab fa-github
#         url: 'https://github.com/ppoffice/hexo-theme-icarus'

Page footer configurations

footer:

Links to be shown on the right of the footer section

links:
    Creative Commons:
        icon: fab fa-creative-commons
        url: 'https://creativecommons.org/'
    Attribution 4.0 International:
        icon: fab fa-creative-commons-by
        url: 'https://creativecommons.org/licenses/by/4.0/'
    Download on GitHub:
        icon: fab fa-github
        url: 'https://github.com/ppoffice/hexo-theme-icarus'

Article related configurations

article:

Code highlight settings

highlight:
    # Code highlight themes
    # https://github.com/highlightjs/highlight.js/tree/master/src/styles
    # CDN: https://cdn.jsdelivr.net/npm/highlight.js@11.0.1/styles
    theme: base16/oceanicnext
    # Show copy code button
    clipboard: true
    # Default folding status of the code blocks. Can be "", "folded", "unfolded"
    fold: unfolded
# Whether to show estimated article reading time
readtime: true
# Article licensing block
licenses:
    Creative Commons:
        icon: fab fa-creative-commons
        url: 'https://creativecommons.org/'
    Attribution:
        icon: fab fa-creative-commons-by
        url: 'https://creativecommons.org/licenses/by/4.0/'
    Noncommercial:
        icon: fab fa-creative-commons-nc
        url: 'https://creativecommons.org/licenses/by-nc/4.0/'

Search plugin configurations

https://ppoffice.github.io/hexo-theme-icarus/categories/Plugins/Search/

search: type: insight

Comment plugin configurations

https://ppoffice.github.io/hexo-theme-icarus/categories/Plugins/Comment/

comment: type: disqus

Disqus shortname

shortname: withheld

Donate plugin configurations

https://ppoffice.github.io/hexo-theme-icarus/categories/Plugins/Donation/

donates:

"Afdian.net" donate button configurations

-

type: afdian

URL to the "Afdian.net" personal page

url: ''

Alipay donate button configurations

-

type: alipay

Alipay qrcode image URL

qrcode: ''

"Buy me a coffee" donate button configurations

-

type: buymeacoffee

URL to the "Buy me a coffee" page

url: ''

Patreon donate button configurations

-

type: patreon

URL to the Patreon page

url: ''

Paypal donate button configurations

-

type: paypal

Paypal business ID or email address

business: ''

Currency code

currency_code: USD

Wechat donate button configurations

-

type: wechat

Wechat qrcode image URL

qrcode: ''

Share plugin configurations

https://ppoffice.github.io/hexo-theme-icarus/categories/Plugins/Share/

share:

type: sharethis

URL to the ShareThis share plugin script

install_url: ''

Sidebar configurations.

Please be noted that a sidebar is only visible when it has at least one widget

sidebar:

Left sidebar configurations

left:
    # Whether the sidebar sticks to the top when page scrolls
    sticky: true
# Right sidebar configurations
right:
    # Whether the sidebar sticks to the top when page scrolls
    sticky: false

Sidebar widget configurations

http://ppoffice.github.io/hexo-theme-icarus/categories/Widgets/

widgets:

Profile widget configurations

-
    # Where should the widget be placed, left sidebar or right sidebar
    position: left
    type: profile
    # Author name
    author: Carl Scarlett
    # Author title
    author_title: Designer, Developer, Dreamer, Doer
    # Author's current location
    location: Perth, Western Australia
    # URL or path to the avatar image
    avatar: 
    # Whether show the rounded avatar image
    avatar_rounded: true
    # Email address for the Gravatar
    gravatar: withheld
    # URL or path for the follow button
    follow_link: 'https://twitter.com/ZodmanPerth'
    # Links to be shown on the bottom of the profile widget
    social_links:
        Github:
            icon: fab fa-github
            url: 'https://github.com/ZodmanPerth'
        Twitter:
            icon: fab fa-twitter
            url: 'https://twitter.com/ZodmanPerth'
        LinkedIn:
            icon: fab fa-linkedin
            url: 'https://www.linkedin.com/in/carlscarlett/'
        YouTube:
            icon: fab fa-youtube
            url: 'https://www.youtube.com/user/ZodmanPerth'
        RSS:
            icon: fas fa-rss
            url: /atom.xml

# Table of contents widget configurations
-
    # Where should the widget be placed, left sidebar or right sidebar
    position: left
    type: toc
    # Whether to show the index of each heading
    index: true
    # Whether to collapse sub-headings when they are out-of-view
    collapsed: false
    # Maximum level of headings to show (1-6)
    depth: 3

# Recent posts widget configurations
-
    # Where should the widget be placed, left sidebar or right sidebar
    position: right
    type: recent_posts

# # Google FeedBurner email subscription widget configurations
# # Feedburner is going into maintenance mode: https://github.com/ppoffice/hexo-theme-icarus/issues/863
# -
#     # Where should the widget be placed, left sidebar or right sidebar
#     position: right
#     type: subscribe_email
#     # Hint text under the email input
#     description: 
#     # Feedburner ID
#     feedburner_id: ''

# Archives widget configurations
-
    # Where should the widget be placed, left sidebar or right sidebar
    position: right
    type: archives

# Categories widget configurations
-
    # Where should the widget be placed, left sidebar or right sidebar
    position: right
    type: categories

# Tags widget configurations
-
    # Where should the widget be placed, left sidebar or right sidebar
    position: right
    type: tags

# Recommendation links widget configurations
-
    # Where should the widget be placed, left sidebar or right sidebar
    position: right
    type: links
    # Names and URLs of the sites
    links:
        Godot: 'https://godotengine.org/'
        Win2D: 'https://github.com/Microsoft/Win2D'
        BenchmarkDotNet: 'https://github.com/dotnet/BenchmarkDotNet'
        LINQPad: 'https://www.linqpad.net/'

# # Google AdSense unit configurations
# -
#     # Where should the widget be placed, left sidebar or right sidebar
#     position: left
#     type: adsense
#     # AdSense client ID
#     client_id: ''
#     # AdSense AD unit ID
#     slot_id: ''

Plugin configurations

https://ppoffice.github.io/hexo-theme-icarus/categories/Plugins/

plugins:

Enable page startup animations

animejs: false
# Show the "back to top" button
back_to_top: true
# Baidu Analytics plugin settings
# https://tongji.baidu.com
baidu_analytics:
    # Baidu Analytics tracking ID
    tracking_id: 
# Bing Webmaster Tools plugin settings
# https://www.bing.com/toolbox/webmaster/
bing_webmaster:
    # Bing Webmaster Tools tracking ID in the <meta> tag
    tracking_id: 
# BuSuanZi site/page view counter
# https://busuanzi.ibruce.info
busuanzi: true
# CNZZ statistics
# https://www.umeng.com/web
cnzz:
    # CNZZ tracker id
    id: 
    # CNZZ website id
    web_id: 
# Alerting users about the use of cookies
# https://www.osano.com/cookieconsent/
cookie_consent:
    # The compliance type. Can be "info", "opt-in", or "opt-out"
    type: info
    # Theme of the popup. Can be "block", "edgeless", or "classic"
    theme: edgeless
    # Whether the popup should stay static regardless of the page scrolls
    static: false
    # Where on the screen the consent popup should display
    position: bottom-left
    # URL to your site's cookie policy
    policyLink: 'https://www.cookiesandyou.com/'
# Enable the lightGallery and Justified Gallery plugins
gallery: false
# Google Analytics plugin settings
# https://analytics.google.com
google_analytics:
    # Google Analytics tracking ID
    tracking_id: 
# Hotjar user feedback plugin
# https://www.hotjar.com/
hotjar:
    # Hotjar site id
    site_id: 
# Enable the KaTeX math typesetting support
# https://katex.org/
katex: false
# Enable the MathJax math typesetting support
# https://www.mathjax.org/
mathjax: true
# Enable the Outdated Browser plugin
# http://outdatedbrowser.com/
outdated_browser: false
# Show a progress bar at top of the page on page loading
progressbar: true
# Statcounter statistics
# https://statcounter.com/
statcounter:
    # Statcounter project id
    project: 
    # Statcounter project security code
    security: 
# Twitter conversion tracking plugin settings
# https://business.twitter.com/en/help/campaign-measurement-and-analytics/conversion-tracking-for-websites.html
twitter_conversion_tracking:
    # Twitter Pixel ID
    pixel_id:

CDN provider settings

https://ppoffice.github.io/hexo-theme-icarus/Configuration/Theme/speed-up-your-site-with-custom-cdn/

providers:

Name or URL template of the JavaScript and/or stylesheet CDN provider

cdn: jsdelivr
# Name or URL template of the webfont CDN provider
fontcdn: google
# Name or URL of the fontawesome icon font CDN provider
iconcdn: fontawesome

- Any additional theme configuration files (post front-matter, `_config.post.yml`, or `_config.page.yml`)
Not applicable

- Browser and version (e.g., Firefox 70.0, Chrome Android 80.0)
Google Chrome (Windows)
Version 92.0.4515.131 (Official Build) (64-bit)

**To Reproduce**
Steps to reproduce the behavior:

I have created a public Gist demonstrating the issue.

1. Create post on a Hexo site with the Icarus Theme with Mathjax turned on
2. Add the following embedded Gist code:
3. Generate, serve, and open the post
4. Observe the page will show a post with an embedded Gist, however the contents of the Gist will be affected by MathJax.

**Expected behavior**
The embedded Gist should not be affected by MathJax

**Screenshots**
If applicable, add screenshots to help explain your problem.
The embedded gist, as shown on the post:
![image](https://user-images.githubusercontent.com/546368/129462573-08837e88-2f4e-4186-85f3-eb69dc17570a.png)

Right clicking the MathJax in the Gist:
![image](https://user-images.githubusercontent.com/546368/129462575-c266fdbd-6696-4805-a149-8b840139160e.png)

The actual content of the Gist (what should be displayed):
![image](https://user-images.githubusercontent.com/546368/129462577-270361dc-2afb-4ebe-abfb-f76af3b33404.png)

**Additional context**
Add any other context about the problem here.
I have tried several methods for preventing the MathJax from applying to the Gist.
* Surrounded the script tag in `$$`
* Surrounded the script tag in a `<div>` `</div>`
* Surrounded the script tag in a `<div>` `</div>` and a `$$`
* Modified the configuration of MathJax to include an ignore class for tex2jax, and surrounded the script in a `<div class="zodIgnoreMathJax">` :


Please let me know if there is a way to turn off MathJax processing for part of the post.
ppoffice commented 2 years ago

Where did you put your MathJax config? Also, you can try to wrap your gist with tex2jax_ignore without modifying the MathJax config.

ZodmanPerth commented 2 years ago

Where did you put your MathJax config?

MathJax config was placed in mathjax.js so it would generate with the page:

_createClass(Mathjax, [{
    key: "render",
    value: function render() {
      var jsUrl = this.props.jsUrl;
      var js = "MathJax.Hub.Config({\n            'HTML-CSS': {\n                matchFontHeight: false\n            },\n            SVG: {\n                matchFontHeight: false\n            },\n            CommonHTML: {\n                matchFontHeight: false\n            },\n            tex2jax: {\n                ignoreClass: \"zodIgnoreMathJax\",\n                inlineMath: [\n                    ['$','$'],\n                    ['\\\\(','\\\\)']\n                ]\n            }\n        });";

(The excerpt from my previous post was extracted from the generated page using Chrome Developer Tools.)

Also, you can try to wrap your gist with tex2jax_ignore without modifying the MathJax config.

Is this what you mean? Because this doesn't work:

<div class="tex2jax_ignore">
    <script src="https://gist.github.com/ZodmanPerth/ce90e1ac74276f5e30f0905c71a91c5d.js?file=Sample.js"></script>
</div>

I have also tried:

<tex2jax_ignore>
    <script src="https://gist.github.com/ZodmanPerth/ce90e1ac74276f5e30f0905c71a91c5d.js?file=Sample.js"></script>
</tex2jax_ignore>

...which doesn't work either. MathJax insists on affecting the Gist.

What's interesting is that as the page loads you can see the Gist load correctly, then MathJax alters it. I'm wondering if there's a way to force the MathJax script to run against the page before the Gist script loads, hoping that MathJax does not listen for changes to the DOM?

ppoffice commented 2 years ago

@ZodmanPerth Try changing ignoreClass: "zodIgnoreMathJax" to ignoreClass: "gist".

ZodmanPerth commented 2 years ago

Changing ignoreClass: "zodIgnoreMathJax" to ignoreClass: "gist" had no effect; MathJax still affects the contents of the Gist.

ppoffice commented 2 years ago

@ZodmanPerth It turns out that your code is parsed as ASCIIMath notations instead of TeX. Using asciimath2jax_ignore as class name will prevent your code from being processed by MathJax.

<div class="asciimath2jax_ignore">
    <script src="https://gist.github.com/ZodmanPerth/ce90e1ac74276f5e30f0905c71a91c5d.js?file=Sample.js"></script>
</div>

If you are not sure which preprocessor MathJax will use, just add all ignored class names to your wrapper:

<div class="tex2jax_ignore asciimath2jax_ignore">
    <script src="https://gist.github.com/ZodmanPerth/ce90e1ac74276f5e30f0905c71a91c5d.js?file=Sample.js"></script>
</div>
ZodmanPerth commented 2 years ago

That works!

Thank you very much. I don't know how MathJax processing works and I didn't find any information about the asciimath2jax_ignore class when I tried to solve this issue on my own. I really appreciate the guidance you've provided.