Filament•2mo ago

Custom page render Markdown

Hi guys! I have an issue of rendering a markdown text on a custom page which is in the end a Cluster. Any solution? I've tried via: {!! str($markdownContent)->markdown()->sanitizeHtml() !!} but nothing works at it should format the markdown.

30 Replies

Dennis Koch•2mo ago

You probably didn't add any styling to it? For Tailwind there is prose.

abdullafahemOP•2mo ago

Is not rendering at all the markdown content is not about the Tailwind at all.

Dennis Koch•2mo ago

No content at all? Where does it break? What does just $markdownContent or str($markdownContent)->markdown() render? Not sure whether sanitizeHtml won't break markdown, because that's HTML

abdullafahemOP•2mo ago

Lists Unordered + Create a list by starting a line with +, -, or * + Sub-lists are made by indenting 2 spaces: - Marker character change forces new list start: * Ac tristique libero volutpat at + Facilisis in pretium nisl aliquet - Nulla volutpat aliquam velit + Very easy! I was trying something like this but it doesn't render as a markdown but as a simple string

Dennis Koch•2mo ago

You said it doesn't render anything at all? What does the HTML of that "simple string" look like? Can you send a screenshot from the dev tools?

Merdin•2w ago

Hi @Dennis Koch I'm currently running into the same/similar problem. Markdown is rendering but it completely ignores the # (<h1>...<h5>) tags. How can I fix this?

Text::make(str($rules)
  ->markdown()
  ->toHtmlString())
  ->extraAttributes(['class' => 'prose lg:prose-xl'])

Text::make(str($rules)
  ->markdown()
  ->toHtmlString())
  ->extraAttributes(['class' => 'prose lg:prose-xl'])

Dennis Koch•2w ago

Is it rendering the HTML properly? Do you have a custom theme?

Merdin•2w ago

I have a custom theme. Yes it is rendering the HTML, no tags are being displayed. When I do **bold** the text is in bold

Dennis Koch•2w ago

Also the h1...h6 tags?

Merdin•2w ago

The h1...h6 tags are not being rendered properly, they all have the same text size / style

Merdin•2w ago

This is in my file:

# Heading 1

**bold text**

## Heading 2

# Heading 1

**bold text**

## Heading 2

The output is in the image

Merdin•2w ago

this is the html

awcodes•2w ago

Try fi-prose instead of prose

Merdin•2w ago

That did it, thanks !

awcodes•2w ago

There might even be a ->prose() method to do it for you.

Merdin•2w ago

let me check on the Text component?

awcodes•2w ago

Not sure if the Text component has that. I might be thinking of the TextEntry component

Merdin•2w ago

Ah okay, I will check it out Text does not have it

awcodes•2w ago

Whatever works.

Merdin•2w ago

yes it does Thanks !

Dennis Koch•2w ago

Sounds like you didn't compile your theme or the file is not included in the sources. But yeah, forgot that Filament ships with a fi-prose

awcodes•2w ago

Makes sense, prime components probably don’t have a lot of the helper methods like ->prose() since they are lower level.

Merdin•2w ago

What do you mean with "compile"? Running npm run build?

Dennis Koch•2w ago

Yep.

Merdin•2w ago

The files are in my sources, they are in one of the subfolders :

@source '../../../../resources/views/filament/**/*';

@source '../../../../resources/views/filament/**/*';

I just did that, that didn't change it

Dennis Koch•2w ago

That's the issue. This code is not in resources/views

Text::make(str($rules)
  ->markdown()
  ->toHtmlString())
  ->extraAttributes(['class' => 'prose lg:prose-xl'])

Text::make(str($rules)
  ->markdown()
  ->toHtmlString())
  ->extraAttributes(['class' => 'prose lg:prose-xl'])

Merdin•2w ago

./resources/views/filament/lms/pages/rules.blade.php

./resources/views/filament/lms/pages/rules.blade.php

this is the file path This is my complete file:

@import '../../../../vendor/filament/filament/resources/css/theme.css';

@source '../../../../app/Filament/**/*';
@source '../../../../resources/views/filament/**/*';

/* Background color */
body {
    background-color: #f5f5dc !important;
}

@import '../../../../vendor/filament/filament/resources/css/theme.css';

@source '../../../../app/Filament/**/*';
@source '../../../../resources/views/filament/**/*';

/* Background color */
body {
    background-color: #f5f5dc !important;
}

awcodes•2w ago

If you’re in a panel then stick to .fi-prose, otherwise you’re going to have a lot of headaches.

Dennis Koch•2w ago

Okay, that one should cover it: @source '../../../../app/Filament/**/*';

Merdin•2w ago

The component is in: ./app/Filament/Lms/Pages/Rules.php I will use TextEntry, thanks again !

Gaming

Programming

Custom page render Markdown

Did you find this page helpful?