{literal}

{literal} tags allow a block of data to be taken literally. This is typically used around Javascript or stylesheet blocks where {curly braces} would interfere with the template delimiter syntax. Anything within {literal}{/literal} tags is not interpreted, but displayed as-is. If you need template tags embedded in a {literal} block, consider using {ldelim}{rdelim} to escape the individual delimiters instead.

Example 7-25. {literal} tags

{literal}
<script type="text/javascript">
<!--
  function isblank(field) {
    if (field.value == '')
      { return false; }
    else
      {
      document.loginform.submit();
      return true;
    }
  }
// -->
</script>
{/literal}

Example 7-26. Javascript function example

<script language="JavaScript" type="text/javascript">
{literal}
function myJsFunction(name, ip){
   alert("The server name\n" + name + "\n" + ip);
}
{/literal}
</script>
<a class="blue" HREF="res_javascript:myJsFunction('{$smarty.server.SERVER_NAME}','{$smarty.server.SERVER_ADDR}')">Click here for the Server Info</a>

Example 7-27. Some css style in a template

{* included this style .. as an experiment *}
<style type="text/css">
{literal}
/* this is an intersting idea for this section */
.madIdea{
    border: 3px outset #ffffff;
    margin: 2 3 4 5px;
    background-color: #001122;
}
{/literal}
</style>
<div class="madIdea">With smarty you can embed CSS in the template</div>

See also {ldelim} {rdelim} and the escaping Smarty parsing page.