Agregar CSS Code List

Publicado

4 JUN, 2025

Categoría

Laravel

Agregar CSS para display frontend listado de código (code block), basado en:
How can I style code listings using CSS?
Ver también del creador: Code Styler github

Global Helper

En app/Helper/helpers.php
Código:

// Convertir markdown en html
if (!function_exists('markdownToHtml')) {
    function markdownToHtml($text)
    {
        $html = Str::markdown($text);
        // dd($html);
        return $html;
    }
}

Agregar CSS

En public/frontend/assets/css/blog-details.css
Código:

/* Custom CSS para blog-details for frontend */

code.language-php {
    background: #f4f4f4;
    border: 1px solid #ddd;
    border-left: 3px solid #f36d33;
    color: #666;
    page-break-inside: avoid;
    font-family: monospace;
    font-size: 12px;
    line-height: 1.6;
    margin-bottom: 1.6em;
    max-width: 100%;
    overflow: auto;
    padding: 1em 1.5em;
    display: block;
    word-wrap: break-word;
}

h2 {
    color: #190844;
    font-weight: bold;
    /* text-transform: uppercase; */
    letter-spacing: 1px;
    font-size: 30px;
    margin-bottom: 1px;
    padding-bottom: 2px;
    
}

p {
    font-size: 16px;
    color: #666;
    line-height: 1.4;
    margin-top: 5px;
    margin-bottom: 1.6em;
    padding-top: 1px;
}

Incluir CSS en la Vista

En resources/views/frontend/blog-details.blade.php
Código:

{{-- css script --}}
@push('child-styles')
    <!-- Mi Custom CSS -->
    
@endpush

Y mandamos llamar el contenido

En resources/views/frontend/blog-details.blade.php
Código:

<!-- Contenido del blog -->
<div class="description">
	{!! markdownToHtml($blog->description) !!}
</div>

Por lo pronto puedo acceder a la imagen haciendo referencia a imagen que almacene en la carpeta: public/storage/blog/Pasted-20250406072041.png Y lo puedo acceder desde el archivo markdown con una liga así: Código:

[Ver Imagen](http://portfolio.test/blog-details-show-image/Pasted-20250406072041.png)

Ver Imagen