How to create a beautiful, functional Pricing Slider with Tailwind CSS and Alpine.js
A detailed guide on building a pricing slider using Tailwind CSS and Alpine.js, with support for non-linear scaling, multiple currencies and custom price logic
... " data-copied="Copied!">Once you have your prism.js
and prism.css
code included or bundled into the browser, you just need to include a code block with a class tag defining the language.
Here’s a simple example from our landing page as it would appear in your HTML editor, note the "language-javascript"
class:
<pre><code class="language-javascript">const MailPace = require('@mailpace/mailpace.js');const client = new MailPace.DomainClient('API_TOKEN_HERE');
client .sendEmail({ from: 'test@test.com', to: 'test@test.com', subject: 'test', htmlbody: 'HTML Email', }) .then((r) => { console.log(r); });</code></pre>
Note that the inclusion of the <pre>
tags means the layout is preserved, including tabs and whitespace, hence the awkward layout. Removing the <pre>
tags will give you the code in an inline format, useful for short snippets.
When this is rendered in the browser with Prism, you’ll see it looking much prettier, something like this:
const MailPace = require('@mailpace/mailpace.js');const client = new MailPace.DomainClient('API_TOKEN_HERE');
client .sendEmail({ from: 'test@test.com', to: 'test@test.com', subject: 'test', htmlbody: 'HTML Email', }) .then((r) => { console.log(r); });
Our original HTML consists of standard <code>
blocks, which are generally used for code examples. These are surrounded by <pre>
tags which “preserve” the formatting. This means you have to be a bit careful with tabs and line breaks inside your source code that are typically ignored by HTML parsers.
When we include the class language-XXXX
in the code block (where XXXX
is one of the many supported Prism languages), the Prism JavaScript will treat this block as code and apply syntax highlighting to it.
It does this by breaking each known language token into individual <span>
tags and categorizing them into types of language token (e.g. operator, punctuation, string etc.), using Regular Expressions.
The prism.css
rules then take care of the actual colouring. These RegExes and the implementation can be quite complex, but the concept is relatively simple.
That’s it - easy to add, when you know how.
A detailed guide on building a pricing slider using Tailwind CSS and Alpine.js, with support for non-linear scaling, multiple currencies and custom price logic
A guide to the three options for embedding images into HTML emails
Setting Up Multiple SMTP Transactional Email Providers, A Guide for Developers
A detailed guide on how emails are structured, focused on how headers and Multipurpose Internet Mail Extensions (MIME types) are used to structure the email