Detalles Blog
Agregar CSS Code List
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)

