Making Code Copyable on Your Page
Most of the articles in the Willmaster Library and Blog contain source code you can copy and paste. The code may be JavaScript, PHP, Perl, HTML, or other.
Generally, source code is put into a pre tag or into a textarea form field.
If that's all there was to it, then this article would be done.
But angle brackets and ampersands need special handling. Quotes, too. Let's use this sentence for an illustration.
Jack & Jill — up the hill.
The sentence is within paragraph tags and it publishes an em dash.
To provide the source code for a site owner to publish that sentence, you would need to provide this for copying and pasting.
And how would you get that copyable source code published on your page, so the HTML markup and the HTML entity show up as source code?
In other words, how do you publish source code that shows up like source code?
Use this table to convert every occurrence of the listed characters into their equivalent HTML entities.
| Change This | To This |
|---|---|
< | < |
> | > |
& | & |
" | " |
When that is done for the "Jack & Jill" sentence source code, you end up with this.
You put that source code into your web page so your web page publishes source code that's copyable by others so they can publish the sentence on their web pages.
Here is how it works.
-
You put this into the source code of your web page.
<p>Jack & Jill &mdash; up the hill.</p> -
When you do that, this is what publishes on your web page that other people can copy.
<p>Jack & Jill — up the hill.</p> -
When other people copy the source code from your web page and paste it into the source code of their own web page, it will appear like this:
Jack & Jill — up the hill.
Here is a generator you can use to convert source code into characters you can publish on your web page so the source code is available for others. (Try <p>Jack & Jill — up the hill.</p> for testing.)
You are welcome to use the generator here. You are also welcome to put the generator on your own web page.
Here is the generator source code.
<?php
/*
Convert Source Code for Publishing Copyable Source Code
Version 1.0
January 1, 2019
Will Bontrager Software LLC
https://www.willmaster.com/
*/
$homecode = $publishcode = $result = '';
if( isset($_POST['thecode']) and strlen($_POST['thecode']) > 0 )
{
$result = $_POST['thecode'];
$publishcode = htmlentities( $result );
$homecode = htmlspecialchars( $publishcode );
}
?><!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Convert Source Code for Publishing Copyable Source Code</title>
<style type="text/css">
* { box-sizing:border-box; }
html, body { font-size:100%; font-family:sans-serif; margin:0; }
pre { overflow:auto; border:1px solid #ccc; border-radius:.5em; padding:.75em; margin-top:0; }
</style>
</head>
<body>
<h3 style="margin-top:0;">
Convert Source Code for Publishing Copyable Source Code
</h3>
<form method="post" enctype="multipart/form-data" accept-charset="utf-8" action="<?php echo(htmlspecialchars($_SERVER['PHP_SELF'])); ?>">
<p style="margin-bottom:.15em;">
Type or paste the source code to encode.
</p>
<textarea name="thecode" style="width:100%; height:1in;"><?php echo($publishcode) ?></textarea>
<p>
<input type="submit" value="Encode the code" style="width:100%;">
</p>
</form>
<?php if( strlen($result) ): ?>
<p style="margin-bottom:.15em;">
Put this into the source code of your web page.
</p>
<pre>
<?php echo($homecode) ?>
</pre>
<p style="margin-bottom:.15em;">
Your site visitors will see this on your page to copy and put on their pages.
</p>
<pre>
<?php echo($publishcode) ?>
</pre>
<p style="margin-bottom:.15em;">
Their site visitors will see this.
</p>
<pre style="white-space:normal;">
<?php echo($result) ?>
</pre>
<?php endif; ?>
<p style="margin-bottom:0;">
Copyright 2019 <a href="https://www.willmaster.com/">Will Bontrager Software LLC</a>
</p>
</body>
</html>
The generator is PHP software and may be saved with any file name ending with the .php file name extension.
The generator can be used by putting its URL into the web browser.
With the generator, it is now easier to create source code that publishes as source code for people to copy.
(This article first appeared with an issue of the Possibilities newsletter.)
Will Bontrager
