Using markdown x liquidtags outside Livewire
Hi I'd like to use the liquidtags outside livewire
So I create a helper function something like this (copying from docs regarding LuqidTags)
except the return part, I wrap it in Str::markdown
<?php
use Illuminate\Support\Str;
use Illuminate\Support\Facades\Log;
class MarkdownHelper {
public static function parseLiquidTags($html){
$matches = "";
// If we find at least one liquid tag
if( preg_match_all('/{% .* %}/', $html, $matches) && isset($matches[0]) ){
// loop through each of the liquid tags
foreach($matches[0] as $index => $match){
// replace multiple spaces with single space
$matchArray = explode(" ", preg_replace('!\s+!', ' ', $match));
// gaurantee we have the first value and run specific function for specific tag
if($matchArray[1]){
switch($matchArray[1]){
case 'youtube':
$html = self::replaceYouTubeTag($html, $matchArray, $match);
break;
case 'codepen':
$html = self::replaceCodePenTag($html, $matchArray, $match);
break;
case 'codesandbox':
$html = self::replaceCodeSandboxTag($html, $matchArray, $match);
break;
case 'giphy':
$html = self::replaceGiphyTag($html, $matchArray, $match);
break;
}
}
}
}
// return as unescaped raw html
return Str::markdown($html);
}
So in my blade template plan to display it like this:
{!! MarkdownHelper::parseLiquidTags($lesson->subject) !!}
Problem is it renders the codepen tags for example as normal text
Without Str::markdown indeed it works for Luqidtags,
BUT won't render other normal element from markdown to HTML
I guess because Str::markdown see it as string need to be escaped. Has anyone solved this issue ?
thanks
Here's how I solve it so far not sure, if there's correct/cleaner way to do this
public static function replaceCodePenTag($html, $tagArray, $original_string){
if(isset($tagArray[2])){
$embedLink = $tagArray[2] . ' ' .$tagArray[3];
preg_match_all('/<a[^>]+href=([\'"])(?<href>.+?)\1[^>]*>/i', $embedLink, $result);
if (empty($result['href'])) {
return $html;
}
$codepenEmbedURL = $result['href'][0];
$codepenEmbedURL = str_replace("/pen/", "/embed/", $codepenEmbedURL);
// $defaultTag = 'default-tab=result';
// if(isset($tagArray[3]) && $tagArray[3] != '%}'){
// $defaultTag = $tagArray[3];
// }
$codepenEmbed = '<div class="overflow-hidden border border-gray-100 rounded-lg">
<iframe loading="lazy" height="600" style="width: 100%;"
scrolling="no"
src="' . $codepenEmbedURL . '"
frameborder="no"
allowtransparency="true"
allowfullscreen="true">
</iframe></div>';
$html = str_replace($original_string, $codepenEmbed, $html);
}
return $html;
}
Hi there,
What I usually do is to:
- Add the helper function
- When displaying the content, first use the
Str::markdown($this->content);method first and then parse the liquid tags
If you first parse the liquid tags, the Str::markdown method will escape the HTML if this is how you've configured the markdown parser to work.
Let me know how it goes!
Hi there,
Sorry missed that comment last week. Did you get this working?
The way that you have it is more or less correct, you just need to parse the Markdown first and then pass it to the liquid tag helper, eg:
public function updateContentPreview(){
$this->contentPreview = $this->parseLiquidTags( Str::markdown($this->content) );
}
Hi there,
Yes, it will be the absolute same thing, but you just call your helper method wherever you need it, eg:
{!! MarkdownHelper::parseLiquidTags(Str::markdown($leson->subject)) !!}
You will just have to update your MarkdownHelper class and change the last line from:
return Str::markdown($html);
To:
return $html;
Best,
Bobby