Inserting html code with markdown to a div, using a twig function

Question

I want to use Markdown to preview to the user how a form field on a twig file will be styled using javascript.

Basically what I'm trying to do, is :

// This function is used to show the Description Preview 
$( "#server_new_profile_description" ).on('input propertychange', function() {
    // This should make the $(this).val() formated in markdown
    var descrString = $(this).val();
    $("#descriptionPrev div").html("{{- "+descrString+"|markdown|raw -}}");
});

What I get: If the input is *ABC*

the output will be: {{*ABC*|markdown|raw}}.

instead of ABC

Can anyone get me through this?

keewnn · Accepted Answer · 2015-05-11 17:24:43Z

3

Twig is rendered server-side, which means it gets executed only once, when you request the page. So you will have to use javascript functions to achieve the markdown effects. This means you will need a markdown parser, for example: https://github.com/evilstreak/markdown-js

answered May 11, 2015 at 17:24

keewnn

6003 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

andre mcgruder · Accepted Answer · 2015-05-11 17:49:03Z

0

I created HTML that looks like this.

<div id="server_new_profile_description"> 
<input type="text">
</div>

<div id="descriptionPrev">
</div>

And I would achieve what you are looking to do like this.

$( "#server_new_profile_description input" ).change(function() {
    var descrString = $(this).val();
    $("#descriptionPrev").html("{{*"+descrString+"*|markdown|raw -}}");
});

It grabs the input element that is inside the div with the server_new_profile_description ID and won change it grabs the value assigning it to a variable. That variable is then placed inside of the DIV with the ID of descriptionPrev and concatenated with the two string parts

answered May 11, 2015 at 17:49

andre mcgruder

1,5521 gold badge11 silver badges13 bronze badges

1 Comment

Stefanos Over a year ago

Have you tested this? It is not working at all. I get exactly the same result but with stars this time.

Collectives™ on Stack Overflow

Inserting html code with markdown to a div, using a twig function

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related