Viewing a web page source code on iPad (Shortcut)

June 7, 2020 | Reading time 2 minutes

The iPad is my preferred tool for research and checking the design of other websites. For saving content I use my Safari >  iA Writer Shortcut, but for websites the iPad did not fit my needs because there was not a good way viewing source codes. Until I recently made a Shortcut that enables me to view sources codes with syntax highlighting on my iPad. The latter makes reading larger pages much better. With this Shortcut all you have to do is visit the page, tap the share icon and tap the Shortcut. The iPad runs the Shortcut and opens the page as an HTML file in Textastic.

How does the Shortcut work Like most Shortcuts it is quite simple, ones you made it. I use it in conjunction with Textastic, but you can also use apps like iA Writer. The downside with the latter is that syntax highlighting misses. 

The Shortcut gets the URL from the Shortcut input and follows these steps:

  1. Get Title from Shortcut input: the first step in setting the title of the web page as the title of the HTML file.
  2. Text: this adds the HTML extension to file that we will be saving so that Textastic opens it as an HTML file.
  3. Get contents: this is the input for our file.
  4. Make HTML from Contents: turning the content into HTML.
  5. Scripting: combining all inputs and setting the name of the file.
  6. Open Textastic.
  7. Documents: saving the file to and opening it in Textastic.
Steps in the iPad Shortcut for viewing a web page source code in Textastic on the iPad

If you want to use another app just change the app in step 6 and 7. You might want to change or delete the extension in step 2 when you are not using a code editor.

You can get the Shortcut for free to try it out yourself. When using it with Textastic you have to buy the app. This is a one time purchase of € 10.99 and it is worth it. It is my go to app for (S)FTP and editing HTML and CSS files when I’m not at home.

Sources

  1. Textastic
  2. Get the Shortcut Source > Textastic

Last update: June 7, 2020