[RESOLVED]How can I customize the text in a view depending on a word?

CSS, HTML, Jquery, Label, View, Web Forms, Xml, , , , , ,

I have a web application? And I wanna change a part of the text layout? I want to use colors and text styles.

How can I customize the content of the text, that is loaded from an xml-file?

This a part of my xml-file:

...
<references>
    <![CDATA[
      using System;
      using System.ComponentModel;
    ]]>
</references>
...


… and this is a part of my view who had to represent the text with own created layout.


  <p>
            <span class="label">@Html.DisplayNameFor(model => model.Methods)</span>
            @{ 
                foreach (var method in item.Methods)
                {
                    <span>@Html.DisplayFor(modelItem => method)</span>
                }
            }
        </p>


The desired result:


References 
using System;
using System.ComponentModel;

the common approach is write a javascript parser that parses the text into a node tree, and then produce a html fragment based on that tree. see any of the javascript based code syntax highlighters. for example:

   http://alexgorbatchev.com/SyntaxHighlighter/

Such like this??

<script type="text/javascript">
$(document).ready(function () {
changeContent();
});

function changeContent() {
$(".sourcecode").replaceAll("using", "<b>using</b>");
}

</script>

wesley.hs76

Such like this??

Sure! If you had one or more "sourcecode" areas, you could create a specific style for certain elements you wanted to replace and then use something like this to handle your replacement :

<!-- jQuery Reference -->
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script type='text/javascript'>
    // When your page loads
    $(function(){
         // Clean up your source
         CleanSource();
    });  
  
    function CleanSource(){
        // Get the text of your sourcecode element(s) and clean them up
        $('.sourcecode').each(function(){
           $(this).html($(this).text().replace(/using/g,'<b>using</b>'));
        });
    }
</script>
<!-- Example Style -->
<style type='text/css'>
   /* Example style */
   .sourcecode b { color: blue; }  
</style>
</head>
<body>
    <!-- Example of Rendered Source -->
    <pre class='sourcecode'>
        using System;
        using System.ComponentModel;
    </pre>
</body>

You can see an example of this here or as seen rendered below :

This is exactly what I mean. Thank you. It works.

Leave a Reply