How can I display and format HTML code within the page? - php

I want to display html code just like what your see here.
<textarea><script id="ff">gdgdgs</script></textarea>
and have it displayed without altering the page. and have it nicely within a box like this.
How is this achieved?

I think the best way is to actually have a look and see how Stackoverflow does it! :)
If you right click on your code box in Chrome and select inspect element, it'll show you the markup for that box. It's so useful to be able to do this, obviously not to rip people off, but learn how other people put websites together, and how they achieve cool effects like code boxes! :)
Interestingly enough though, if you simply right click on the page and go to view source, you'll see something slightly different:
<pre><code><textarea><script id="ff">gdgdgs</script></textarea>
</code></pre>
So we can see here that this is what the mark-up for that box looks like before the page has loaded and any JavaScript is run. When the page starts to load on the client side, some JavaScript will be run which takes the above mark-up and tranforms it to look like the mark up you see when you right click on the code box and inspect it in chrome. Doing this gives you a real-time view of the HTML on the page:
<pre class="lang-php prettyprint">
<code>
<span class="tag"><textarea><script</span>
<span class="pln"></span>
<span class="atn">id</span>
<span class="pun">=</span>
<span class="atv">"ff"</span>
<span class="tag">></span>
<span class="pln">gdgdgs</span>
<span class="tag"></script></textarea></span>
<span class="pln"><br></span>
</code>
</pre>
So if you have a look, you can see the transformed code uses a pre tag. This basically says, anything between here you can treat as a literal or in otherwords, keep line breaks and spaces where I left them!
As well as using the pre tag to wrap the code, you can also see that they use different CSS classes. This is to achieve the color coding you can see.
They also use a code tag which as far as I can see, is very similar to pre, only it makes your markup a bit clearer by saying, within this tag, you should expect to see code. It's probably more semantic more than anything, like the HTML tag artical. In most browsers, it'll also change the font for text inside the code tag to mono-space, which is a bit more code like! :)
You can go furhter into this and see exactly what their CSS classes look like, from this you can start to build a mental picture to see how their mark-up and CSS works together to product their nice code boxes.
Of course, if you don't want to roll this functionality yourself, you can use someone elses framework to achive this. SyntaxHighlighter for example if widely used and recommended.
With Syntax Highlighter, you simply reference the Syntax Highlighter CSS and javascript, and then only need to wrap your code in one pre tag to get it working, something like below:
<pre class="brush: xml">
<textarea><script id="ff">gdgdgs</script></textarea>
</pre>
It might be worth a look!
Hope this helps! :)

you could use
>
>
and
<
<

This website here can help you with your particular problem. It converts your tags/html/javascript to ASCII. If you need a function, here it is. It converts the passed tags/html/javascript to ASCII. The ASCII code is escaped and treated as text by the browser. You can latter use the generated ASCII and add it to the box.
function stringToAscii(s)
{
var ascii="";
if(s.length>0)
for(i=0; i<s.length; i++)
{
var c = ""+s.charCodeAt(i);
while(c.length < 3)
c = "0"+c;
ascii += c;
}
return(ascii);
}

Use the Encoded Version like this:
<textarea>
<script id="ff">
gdgdgs
</script>
</textarea>

Is this what you mean?
<textarea><script id="ff">gdgdgs</script></textarea>
Look up HTML entities.

Yeah, just include it like:
$(document).ready(function(){
var a = '<textarea><script id="ff">gdgdgs</scrip'+'t></textarea>';
$("div").css('background','red').text(a);
});

I use the <xmp> element.

Related

Text in <textarea> automatically getting tabbed in

pretty new to Mysql, HTML and PHP and I can't seem to find much information on this trouble i'm having.
I Am making my own rough project manager type thing and I have a form that lets me change the contents of each individual change log, the problem I have however is that when I load the data in to the text area it start with a big indentation at the start, like 3-4 tabs inwards. I would attach an image but I need at least 10 rep to do that.
Basically, it feels like the data in the database has tabs or something at the start of it, but when I go to look in PHPmyadmin at the field, it just looks like it should do, not tabbed at all.
I've tried using strip_tags() but I think it only works on visible tags.
Does any1 know how to get rid of this or what is causing the problem?
I'll be following this question closely to see if anybody can provide an answer because I'm stumped.
Thanks,
Try to echo your php code with no blanks :
Possible tabs, bad example :
<textarea>
<?php echo $tabContent; ?>
</textarea>
Avoiding tabs :
<textarea><?php echo $tabContent; ?></textarea>
You can also try to trim your php content like that :
<textarea><?php echo trim($tabContent); ?></textarea>
Try doing var_dump and look how long your queried string is.
If it is as long as in your database you problem is within the textarea.
Is there any css you use with textarea?

random whitespace when echoing HTML with PHP

Thanks so much to everyone who commented and answered this, The problem was missing a double quote from a div higher up on the page! Embarrassing, but again thanks for your efforts! for the record, my problem was that higher up on the page, there was a div like this: directly before I inserted my dynamic div.
I have a pretty simple problem, but I haven't been able to dig up any info on why it's happening.
basically I'm using php to echo quite a bit of html, about 6 divs. one div in particular always displays wrong when viewed on the browser. I'm using notepad++ encoding UTF-8 without BOM. here is an example:
in my index.php, I write:
<? echo '<div class="DivButton">Logout</div>'; ?>
all I see is the text 'Logout' without CSS. when I view the code in a browser it looks like this:
<div class=" divbutton">Logout</div>
Another clue is that often there are 1 or 2 lines before the class, for example in the browser:
<div style="background:#000; left:0px;">Welcome to your website</div><div style="
divbutton">Logout</div>
and ideas are greatly appreciated
As mentioned above, there is no way from the code provided that whitespace can be generated unless you put it there without intention, HTML ignores white spaces anyway so there shouldn't really be such an issue. The case on the code you provided and the output do not match either? Are these actual snippets or just from what you have wrote here.
<div class="divbutton"><? echo 'Logout'; ?></div>
Try less echo, keep it simple so you can see that you are just echoing the 'Logout', I assume you will want this to be dynamic Login / Logout depending on whether there is a session.

Can I use PHP to save only the visible elements of the output as a new file?

I've got a php file that takes an xml file (generated by an outside source) and reformats it with CSS & HTML. A number of the XML tags are things I don't want to see in the final version, so I have them hidden. The end result is something like this:
<html>
<div style="display: none">
content i don't want to see
</div>
content I do want to see.
</html>
Is there a way I can take the resulting html file as it's displayed in the browser window,
content I do want to see.
…and save that as a text file? I want it to ignore all the hidden <div> tags and only save what can otherwise be selected and copied by the user.
I've looked around for an answer to this but I'm not even really sure what I'm looking for or how to search it.
I've also tried this:
ob_start();
file_put_contents('filename.htm', ob_get_contents());
ob_end_flush();
… but that's doesn't solve it. I have a number of tags in the outputted test (> etc) that need to be saves as they are displayed, and ob_get_contents() takes the page's source code, not the displayed version.
This matters because the outputted page is also PHP that has been generated based on other factors, so I need to use html unicode values to keep the $ signs and quotes from messing up the source PHP.
I hope that was clear. Thanks in advance for any help or suggestions.
I think you have to strip out the unneeded part manually, using a RegEx something, which maybe like:
$content_raw = ob_get_contents();
$content_stripped = preg_replace($content_raw, '<div style="display: none">[^<>]*</div>', '');
file_put_contents('filename.htm', $content_stripped);

jquery to color code text

I give php code examples on my site and was wondering if their was a way I could colour code them so that it is easier to read like an IDE would do. I always display the code in a div with a class of code and then in pre tags. See my example below.
<div class="code">
<pre>
<?php
echo 'hello world';
?>
</pre>
</div>
I was wondering if there was a way to do it with jQuery like in a sort of string match way. So give jquery an array of strings that should be blue for example, and then jQuery would look through the code blocks and any words that match it adds a class of blue to them or something? Anyone know of how I would achieve this? Maybe there is a much simpler way already?
Thanks
There are numerous different scripts that can do this - I wouldn't recommend you try to do it yourself unless you want a little project for yourself :)
A syntax highlighter that I use is: http://alexgorbatchev.com/SyntaxHighlighter/
In most cases, you just have to add a class (like php) to the element that you want highlighted. For SyntaxHighlighter, your code would look like:
<pre class="brush: php">
echo "Hello";
</pre>
The correct term for this is "syntax highlighting", and there's some useful scripts available:
http://www.webdesignbooth.com/9-useful-javascript-syntax-highlighting-scripts/

How to keep PHP 'View Source' html output clean [duplicate]

This question already has answers here:
How to properly indent PHP/HTML mixed code? [closed]
(6 answers)
Closed 9 years ago.
This has been bugging me today after checking the source out on a site. I use PHP output in my templates for dynamic content. The templates start out in html only, and are cleanly indented and formatted. The PHP content is then added in and indented to match the html formating.
<ul>
<li>nav1</li>
<li>nav2</li>
<li>nav3</li>
</ul>
Becomes:
<ul>
<?php foreach($navitems as $nav):?>
<li><?=$nav?></li>
<?php endforeach; ?>
</ul>
When output in html, the encapsulated PHP lines are dropped but the white space used to format them are left in and throws the view source formatting all out of whack. The site I mentioned is cleanly formatted on the view source output. Should I assume they are using some template engine? Also would there be any way to clean up the kind of templates I have? with out manually removing the whitespace and sacrificing readability on the dev side?
That's something that's bugging me, too. The best you can do is using tidy to postprocess the text. Add this line to the start of your page (and be prepared for output buffering havoc when you encounter your first PHP error with output buffering on):
ob_start('ob_tidyhandler');
You can't really get clean output from inlining PHP. I would strongly suggest using some kind of templating engine such as Smarty. Aside from the clean output, template engines have the advantage of maintaining some separation between your code and your design, increasing the maintainability and readability of complex websites.
i admit, i like clean, nicely indented html too. often it doesn't work out the way i want, because of the same reasons you're having. sometimes manual indentation and linebreaks are not preserverd, or it doesn't work because of subtemplates where you reset indentation.
and the machines really don't care. not about whitespace, not about comments, the only thing they might care about is minified stuff, so additional whitespace and comments are actually counter-productive. but it's so pretty *sigh*
sometimes, if firebugs not available, i just like it for debugging. because of that most of the time i have an option to activate html tidy manually for the current request. be careful: tidy automatically corrects certain errors (depending on the configuration options), so it may actually hide errors from you.
Does "pretty" HTML output matter? You'll be pasting the output HTML into an editor whenever you want to poke through it, and the editor will presumably have the option to format it correctly (or you need to switch editors!).
I find the suggestions to use an additional templating language (because that's exactly what PHP is) abhorrent. You'd slow down each and every page to correct the odd space or tab? If anything, I would go the other direction and lean towards running each page through a tool to remove the remaining whitespace.
The way I do it is:
<ul>
<?php foreach($navitems as $nav):?>
<li><?=$nav?></li>
<?php endforeach; ?>
</ul>
Basically all my conditionals and loop blocks are flush left within the views. If they are nested, I indent inside the PHP start tag, like so:
<ul>
<?php foreach($navitems as $nav):?>
<?php if($nav!== null) : ?>
<li><?=$nav?></li>
<?php endif; ?>
<?php endforeach; ?>
</ul>
This way, I see the presentation logic clearly when I skim the code, and it makes for clean HTML output as well. The output inside the blocks are exactly where I put them.
A warning though, PHP eats newlines after the closing tag ?>. This becomes a problem when you do something like outputting inside a <pre> block.
<pre>
<?php foreach($vars as $var ) ?>
<?=$var?>
<?php endforeach; ?>
</pre>
This will output:
<pre>
0 1 2 3 4 5 </pre>
This is kind of a hack, but adding a space after the <?=$var?> makes it clean.
Sorry for the excessive code blocks, but this has been bugging me for a long time as well. Hope it helps, after about 7 months.
You few times I have tidied my output for debugging my generated HTML code I have used tabs and newlines... ie;
print "<table>\n";
print "\t<tr>\n";
print "\t\t<td>\n";
print "\t\t\tMy Content!\n";
print "\t\t</td>\n";
print "\t</tr>\n";
print "</table>\n";
I about fell over when I read "I'm really curious why you think it's important to have generated HTML that's "readable". Unfortunately, there were quite a few people on this page (and elsewhere) that think this way...that the browser reads it the same so why worry about the way the code looks.
First, keeping the "code" readable makes debugging (or working in it in general by you or a developer in the future) much easier in almost all cases.
Furthermore, AND MOST IMPORTANTLY, it's referred to as quality of workmanship. It's the difference between a Yugo and a Mercedes. Yes, they are both cars and they both will take you from point "A" to point "B". But, the difference is in the quality of the product with mostly what is not seen. There is nothing worse than jumping into a project and first having to clean up someone else's code just to be able to make sense of things, all because they figured that it still works the same and have no pride in what they do. Cleaner code will ALWAYS benefit you and anyone else that has to deal with it not to mention reflect a level of pride and expertise in what you do.
If it's REAL important in your specific case, you could do this...
<ul><?php foreach($navitems as $nav):?>
<li><?=$nav?></li><?php endforeach; ?>
</ul>
Although that is worse in my opinion, because your code is less readable, even though the HTML is as you desire.
I don't care how clean the output is - it's the original source code that produced it that has to be easy to parse - for me as a developer.
If I was examining the output, I'll run it through tidy to clean it up, if it were required to take a good look at it - but validators don't care about extra spaces or tabs either.
In fact, I'm more likely to strip whitespace out of the output HTML than put any in - less bytes on the wire = faster downloads. not by much, but sometimes it would help in a high traffic scenario (though of course, gzipping the output helps more).
Viewing unformatted source is very annoying with multiple nested divs and many records each containing these divs..
I came across this firefox addon called Phoenix Editor. You can view your source in it's editor and then click "format" and it works like a charm!
Link Here
Try xtemplate http://www.phpxtemplate.org/HomePage its not as well documented as id like, but ive used it to great effect
you would have something like this
<?php
$response = new xtemplate('template.htm');
foreach($navitems as $item)
{
$response->assign('stuff',$item);
$response->parse('main.thelist');
}
$response->parse('main');
$response.out('main');
?>
And the html file would contain
<! -- BEGIN: main -->
<html>
<head></head>
<body>
<ul>
<! -- BEGIN: thelist -->
<li>{stuff}</li>
<!-- END: thelist -->
</ul>
</body>
</html>
I Agree, A clean source is very important, Its well commented, well structured and maintence on those sources, scripts, or code is very quick and simple. You should look into fragmenting your main, using require (prior.php, header.php, title.php, content.php, post.php) in the corresponding places, then write a new function under prior.php that will parse and layout html tags using the explode method and a string splitter, have an integer for tab index, and whenever </ is in the functions string then integer-- whenever < and > but not /> and </ are in the string integer ++ and it all has to be placed properly.... , use a for loop to rebuild another string tabindex to tab the contents integer times.

Categories