Markdown example with css.

markdown-blog.txt

###### Parse with atomjoy/parsedown-media and insert in component with <div v-html="markdown" />

# A Practical Guide to Sending Mail Using Jobs & Queues in Laravel 12

In Laravel, a job is a PHP class that represents a single unit of work to be executed in the background(like sending an email, exporting data, or processing a report). It typically contains some task that might take time to complete. You typically write your business logic inside the job.

## Display code block

A queue is like a line where tasks are handled one by one in the order they arrive. In Laravel, queues let you delay time-consuming work — like sending emails — so it runs in the background instead of slowing down your app. All the jobs are stored in the queue.

```php
<?php

echo "hello";
```

## Queue Jobs

By default, dispatched jobs go into the default queue. Workers pull jobs off the queue and execute them. You can also use multiple queues for different types of jobs. Now we will setup our mail sending process. For mail sending we will use mailtrap. So please open an account in mailtrap and replace the following credentials in the .env file with yours:

```sh
MAIL_MAILER=smtp
MAIL_HOST=sandbox.smtp.mailtrap.io
MAIL_PORT=2525
MAIL_USERNAME=your_mailtrap_username
MAIL_PASSWORD=yout_mailtrap_password
```

### Generate Mailable Class:

When building Laravel applications, each type of email sent by your application is represented as a “mailable” class. These classes are stored in the `app/Mail` directory. Don't worry if you don't see this directory in your application, since it will be generated for you when you create your first mailable class using the `make:mail` Artisan command:

```sh
php artisan make:mail QuoteMail
```

The envelope method returns an object that defines the subject and, sometimes, the recipients of the message. The content method returns an object that defines the Blade Template that will be used to generate the message content. The attachements method returns the attachments for your mail.

```php
public Quote $quote;

/**
 * Create a new message instance.
 */
public function __construct(Quote $quote)
{
    $this->quote = $quote;
}

/**
 * Get the message envelope.
 */
public function envelope(): Envelope
{
    return new Envelope(
        subject: 'Your daily motivation quote',
    );
}

/**
 * Get the message content definition.
 */
public function content(): Content
{
    return new Content(
        view: 'emails.quote',
    );
}
```

> You may wish to create a resources/views/emails directory to house all of your email templates; 
>
> However, you are free to place them wherever you wish within your resources/views directory.

My favorite search engine is [Duck Duck Go](https://duckduckgo.com "The best search engine for privacy").

- <https://www.markdownguide.org>
- <fake@example.com>

> #### The quarterly results look great!
>
> - Revenue was off the chart.
> - Profits were higher than ever.
>
> 1. Revenue was off the chart.
> 2. Profits were higher than ever.
>
>  *Everything* is going according to **plan**.

### To do list

- [x] Finish my changes
- [ ] Push my commits to GitHub
- [ ] Open a pull request
- [x] @mentions, #refs, [links](), **formatting**, and <del>tags</del> supported
- [x] list syntax required (any unordered or ordered list supported)
- [x] this is a complete item
- [ ] this is an incomplete item

### Lists

- First item
- Second item
- Third item
    - Indented item
    - Indented item
- Fourth item 

1. Open the file containing the Linux mascot.
    - Indented item
    - Indented item
2. Marvel at its beauty.

    ![Tux, the Linux mascot](https://img.icons8.com/bubbles/100/google-logo.jpg)

3. Close the file.

## Gallery images

By default, dispatched jobs go into the default queue. Workers pull jobs off the queue and execute them. You can also use multiple queues for different types of jobs.

%%%
https://img.icons8.com/bubbles/100/google-logo.jpg
https://img.icons8.com/bubbles/100/google-logo.jpg
https://img.icons8.com/bubbles/100/google-logo.jpg
https://img.icons8.com/bubbles/100/google-logo.jpg
%%%

## Gallery splide slider

By default, dispatched jobs go into the default queue. Workers pull jobs off the queue and execute them. You can also use multiple queues for different types of jobs.

&&&
https://img.icons8.com/bubbles/100/google-logo.jpg
https://img.icons8.com/bubbles/100/google-logo.jpg
https://img.icons8.com/bubbles/100/google-logo.jpg
https://img.icons8.com/bubbles/100/google-logo.jpg
&&&

markdown.css

/* Update blog colors here */

:root {
    /* Code */
    --pre-link: #76b900;
    --pre-size: 16px;
    --pre-bg: #fbfbfb;
    --pre-border: #e7e7e7;
    --pre-text: hsl(0 0% 4%);
}

.dark {
    /* Code */
    --pre-bg: #1b1b1b;
    --pre-border: #313131;
    --pre-text: hsl(0 0% 98%);
}

/* Blog markdown */
.blog-wrapper {
    font-size: 20px;
    font-family: 'Source Serif 4';
}

.blog-wrapper code {
    font-size: 1rem;
    background: var(--pre-bg);
    color: var(--pre-text);
    padding: 5px;
}

.blog-wrapper pre {
    white-space: pre-wrap;
    float: left;
    width: 100%;
    background: var(--pre-bg);
    color: var(--pre-text);
    margin-block: 1rem;
    padding: 1rem;
    border: 1px solid var(--pre-border);
}

.blog-wrapper pre code {
    font-size: var(--pre-size);
    background: transparent;
    border-radius: 0px;
    padding: 0px;
    font-family: 'JetBrains Mono';
}

.blog-wrapper h1,
.blog-wrapper h2,
.blog-wrapper h3,
.blog-wrapper h4,
.blog-wrapper h5,
.blog-wrapper h6 {
    float: left;
    width: 100%;
    font-weight: 700;
    margin-bottom: 1rem;
    font-family: 'Syne';
}

.blog-wrapper h1 {
    font-size: 2.5rem;
}

.blog-wrapper h2 {
    font-size: 1.8rem;
}

.blog-wrapper h3 {
    font-size: 1.3rem;
}

.blog-wrapper h4 {
    font-size: 1rem;
}

.blog-wrapper p {
    float: left;
    width: 100%;
    font-size: 20px;
    margin-bottom: 1rem;
}

.blog-wrapper a {
    color: var(--pre-link);
}

.blog-wrapper ul {
    float: left;
    width: 100%;
    margin-bottom: 1rem;
    padding-left: 2rem;
    list-style: circle;
}

.blog-wrapper ul li {
    float: left;
    width: 100%;
}

.blog-wrapper ol {
    float: left;
    width: 100%;
    margin-bottom: 1rem;
    padding-left: 2rem;
    list-style: decimal;
}

.blog-wrapper ol li {
    float: left;
    width: 100%;
}

.blog-wrapper blockquote {
    float: left;
    width: 100%;
    margin-bottom: 1rem;
    padding: 1rem;
    font-family: 'Syne';
    color: var(--pre-text);
    background: var(--pre-bg);
    border-left: 10px solid var(--pre-link);
}

.blog-wrapper blockquote ul {
    margin-bottom: 1rem;
    padding-left: 2rem;
    list-style: circle;
}

.blog-wrapper .gallery-content {
    float: left;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    list-style: none;
    padding: 0px;
    gap: 1%;
}

.blog-wrapper .gallery-content li {
    float: left;
    width: 45%;
    margin-bottom: 2rem;
}

.blog-wrapper .gallery-content img {
    float: left;
    width: 100%;
}

/* Highlighter */

.shiki {
    margin: 0px !important;
    border: 0px !important;
    background: var(--pre-bg) !important;
}

.line {
    padding: 3px;
    counter-increment: line;
    float: left;
    width: 100%;
    border-bottom: 1px solid var(--pre-border);
}

.line:before {
    float: left;
    content: counter(line);
    margin-right: 10px;
    width: 35px;
    color: var(--pre-border);
}

.line:before {
    --webkit-user-select: none;
}

/* Gallery Splide Slider */

.splide {
    background: #fafafa;
    width: 100%;
    /* height: 400px; */
    aspect-ratio: 16/9;
}

.splide__image {
    object-fit: cover;
    width: 100%;
    /* height: 400px; */
    aspect-ratio: 16/9;
}

.splide__pagination li {
    width: auto !important;
}