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.