Format Codepen Code

[jmuzina]

The code that is sent to CodePen is not formatted by js-beautify like the code shown in our code snippets is.

We should more consistently apply this formatting so that the code is formatted in one place, and the formatting result is used by both the example code snippets and CodePen.

Context

Here's the code path that the (correctly formatted) code snippet code follows:

1. createPreCode is called on htmlSource
   

   vanilla-framework/templates/static/js/example.js

   Line 148 in 510f79d

   codeSnippet.appendChild(createPreCode(htmlSource, 'html'));

2. createPreCode calls formatSource, which calls the relevant js-beautify formatter.
   

   vanilla-framework/templates/static/js/example.js

   Lines 82 to 85 in 510f79d

   	function createPreCode(source, lang) {
   	var code = document.createElement('code');
   	code.appendChild(document.createTextNode(formatSource(source, lang)));

Here's the code that is defining what is sent to CodePen:

vanilla-framework/templates/static/js/example.js

Lines 114 to 123 in 510f79d

	var htmlSource = stripScriptsFromSource(bodyHTML);
	var jsSource = getScriptFromSource(bodyHTML);
	var cssSource = getStyleFromSource(headHTML);
	var externalScripts = getExternalScriptsFromSource(html);
	var codePenData = {
	html: htmlSource,
	css: cssSource,
	js: jsSource,
	externalJS: externalScripts,
	};

We are using htmlSource, which is not formatted (it is later passed into createPreCode as discussed above).
Maybe we should format htmlSource, jsSource, and cssSource at their initialization, rather than doing it in createPreCode.

[syncronize-issues-to-jira]

Thank you for reporting us your feedback!

The internal ticket has been created: https://warthogs.atlassian.net/browse/WD-14598.

This message was autogenerated

[bartaz]

I believe this is in progress with jinja macro snippets. So triaging it as part of current codebase.

[jmuzina]

Closing as completed in #5321