lazysizes VS PrismJS

Use a JavaScript library to implement lazy loading. There are a number of JavaScript libraries available that can help you implement lazy loading, such as Lazysizes and Lozad.

Normally I would write some client-side JS to do this but as this project is solely server-rendered I opted to use a simple tried-and-true library for this: lazysizes.

I recently did some optimizations on my personal website to make the images load “lazily.” In other words it only loads stuff once it hits the viewport. I think that’s what you’re looking for. I tried two techniques:

1. There is an HTML attribute to do just this and it seems to work for iframes too: https://developer.mozilla.org/en-US/docs/Web/Performance/Laz...

2. There is a simple library called “lazy sizes” (https://github.com/aFarkas/lazysizes)

I tried to avoid the lib and use the native HTML… but for whatever reason the lib worked more reliably/effectively in manual tests as well as in my benchmarking via PageSpeed / Lighthouse. YMMV!

lazysizes is better than loading="lazy"

Since browsers support native lazy-loading, do we need libraries like this https://github.com/aFarkas/lazysizes?

Use Lazy loading for below-the-fold images. (You can use different 3rd party libraries like Unveil, lazysizes, etc.)

⚡️ Lazy load images with lazysizes

You can also use this really great library for handling the loading of images in a holistic and well-supported way or you can look at manually implementing the LQIP technique.

And, lazyloading is only for images. If you use e.g. lazysizes you can do anything with it. I'm a digital publisher so I use it for ads and embedded tweets/IGs and so on.

For Code highlighting, I am using Prism.js. First I am loading the styles file inside the _app.tsx file and inside the CodeBlock component, I am loading the styling that gives us beautiful syntax highlights.

Luckily, implementing syntax highlighting in our simple code editor is easy with the use of external libraries. There are several JavaScript libraries available, such as Prism and Highlight.js. For our editor, we'll use Prism since it's easy to use and supports a wide range of programming languages.

🌈 Prismjs Code highlighting, use it with Marked

I'm trying to implement the new feature in a similar way, but not exactly the same, so my plan is going to modify unwrapMdxCodeBlocks function and apply Prism to highlight the code blocks.

Hey all, I've been taking notes as I learn Godot engine, using the Editor Syntax Highlight plugin, but it doesn't show highlighting in edit mode unlike how it does for other languages. I read on a forum somewhere that this plugin/Obsidian uses [PrismJS](https://github.com/PrismJS/prism/issues) for syntax highlighting, which has gdscript on its list of supported languages, yet it doesn't work. Any help would be appreciated thank you!

I tend to use https://prismjs.com/ on my blog. On the website you click which languages you want to support (e.g. Python, JavaScript, ...) and get a custom set of CSS and JS files which you load into your template. Code than has to be wrapped in

Or this one for csharp which is more complex https://github.com/PrismJS/prism/blob/master/components/prism-csharp.js

I believe Obsidian utilizes PrismJS as its default syntax highlighter for code blocks.

I have a problem with using PrismJS with SvelteKit. I can get the basic languages to work like javascript, but I can't load additional ones using the loadLanguages function, because of the Vite (or at least I think that is the problem). Is there any way to load additional languages highlighting? I am also using tailwind css and flowbite-svelte.

Prismjs was replaced by Shiki and rehype-pretty-code.