Custom Coding with ChatGPT

So you need to write some code, and you kind of understand what you need to do, but you're not an experienced programmer.

What do you do?

You can use ChatGPT to help.

Example

This morning [ 8 Jul 2023 ], I did an experiment to see how good GPT4 is at building a simple ( but complete ) web tool.

The particular case I was looking for was a tool that could convert a chunk of pasted HTML or code into the specific partially-HTML-encoded format that is required by Finsweet's Code Highlight tool.

To syntax-highlight a code blog, Finsweet requires that you prepare a chunk of HTML that looks like this;

<div id="container">
  <textarea id="input"></textarea>
  <button id="convert-button" onclick="convert()">→</button>
  <textarea id="output"></textarea>
  <div id="result"></div>
</div>
<div id="output-copy-container">
  <button id="copy-button" onclick="copyToClipboard()">Copy to Clipboard</button>
</div> 

So that it is HTML encoded like this;

<pre><code>&lt;div id="container">
  &lt;textarea id="input">&lt;/textarea>
  &lt;button id="convert-button" onclick="convert()">&#8594;&lt;/button>
  &lt;textarea id="output">&lt;/textarea>
  &lt;div id="result">&lt;/div>
&lt;/div>
&lt;div id="output-copy-container">
  &lt;button id="copy-button" onclick="copyToClipboard()">Copy to Clipboard&lt;/button>
&lt;/div> 
</code></pre>

Look closely, and you'll note the addition of the _<pre><code> wrapper elements and the HTML entity-encoding of _< and _& characters.

And, in case you're wondering, yes I just used the tool that I created with ChatGPT to generate the syntax highlighted code you're seeing above. Wild, eh?

Check out the Results

Here's the finished tool, available here on this site;

https://www.sygnal.com/tools/code-to-html

How I built it

To allow me to see and test the results of the code ChatGPT was creating, I used CodePen, and pasted the code accordingly.

You can see that CodePen here;

https://codepen.io/memetican/pen/KKrXeEL/9e82942bc281b72f0c4f12cc07e730b5

The process I used to build it involved progressively describing and changing what ChatGPT generated.

You can see my ChatGPT dialogue here;

https://chat.openai.com/share/276d7af7-750f-463e-bbcc-3d6c836542d4

‍