Liquid Tags

In order to parse liquid tags in your application, you will want to create your own custom functionality inside of this function, located in your MarkdownX.php Controller file:

public function updateContentPreview(){
    // Replace line below with your custom functionality
    $this->contentPreview = Str::markdown($this->content);
}

One of the simpler ways to parse these liquid tags might be to create a helper class (we may ship one in a future version of the editor).

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 'buymeacoffee':
                            $html = self::replaceBuyMeACoffeeTag($html, $matchArray, $match);
                            break;
                        case 'giphy':
                            $html = self::replaceGiphyTag($html, $matchArray, $match);
                            break;
                    }
                }
            }
        }

        return $html;
    }
}

The function above will parse the liquid tags and return the HTML. You'll also need the functions for replacing the correct HTML for each of these tags. You'll find those functions below:

Youtube

public static function replaceYouTubeTag($html, $tagArray, $original_string){
    if(isset($tagArray[2])){
        $youtubeEmbedURL = $tagArray[2];
        $youtubeEmbed = '<iframe width="100%" height="399" src="https://www.youtube.com/embed/' . $youtubeEmbedURL . '" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>';
        $html = str_replace($original_string, $youtubeEmbed, $html);
    }
    return $html;
}

Codepen

public static function replaceCodePenTag($html, $tagArray, $original_string){
    if(isset($tagArray[2])){
        $codepenEmbedURL = str_replace("/pen/", "/embed/", $tagArray[2]);
        $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 . '?height=600&theme-id=24057&' . $defaultTag . '" frameborder="no" allowtransparency="true" allowfullscreen="true"></iframe></div>';
        $html = str_replace($original_string, $codepenEmbed, $html);
    }
    return $html;
}

Codesandbox

public static function replaceCodeSandboxTag($html, $tagArray, $original_string){
    if(isset($tagArray[2]) && $tagArray[2] != '%}'){
        $codesandbox = $tagArray[2];
        $url = parse_url($codesandbox);
        if (filter_var($codesandbox, FILTER_VALIDATE_URL) == TRUE && ($url['host'] == 'www.codesandbox.io' || $url['host'] == 'codesandbox.io')) {
            $codesandboxEmbed = '<iframe src="' . $codesandbox  . '" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"title="rough-field-mykn0"allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"></iframe>';
            $html = str_replace($original_string, $codesandboxEmbed, $html);
        }
    }
    return $html;
}

Buy Me a Coffee

public static function replaceBuyMeACoffeeTag($html, $tagArray, $original_string){
    if(isset($tagArray[2]) && $tagArray[2] != '%}'){
        $buyMeACoffee = $tagArray[2];
        $bmcEmbed = '<center><a href="https://buymeacoffee.com/' . $buyMeACoffee . '"><img style="max-height: 90px;" src="https://cdn.devdojo.com/assets/img/buymeacoffee.png" alt="Buy Me A Coffee '. $buyMeACoffee .'"></a></center>';
        $html = str_replace($original_string, $bmcEmbed, $html);
    }
    return $html;
}

Giphy

public static function replaceGiphyTag($html, $tagArray, $original_string){
    if(isset($tagArray[2])){
        $giphyEmbed = $tagArray[2];
        $giphyEmbed = '<div style="width:100%;height:0;padding-bottom:56%;position:relative;display:block"><iframe src="' . $giphyEmbed . '" width="100%" height="100%" style="position:absolute" frameBorder="0" class="giphy-embed" allowFullScreen></iframe></p></div>';
        $html = str_replace($original_string, $giphyEmbed, $html);
    }
    return $html;
}

Note: if you want the Giphy menu item to work correctly in your editor, you will need to add the environment variable MARKDOWNX_GIPHY_API_KEY to your application .env with your Giphy API Key: https://developers.giphy.com/