Skip to main content
WordPress Development

Return to Answer

Added "Cleaning Up Large Amounts of Code Text" section
Source Link
Bill Vallance
Bill Vallance
  • 121
  • 5

Cleaning Up Large Amounts of Code Text

The above solution works fine when creating new code text using the Avada Visual editor, but it is completely impractical to use when importing a large block of code text. That's because every "<" and ">" character would have to be manually escaped. To solve this problem I use Microsoft Word to process the code block text before I copy it into an Avada Text Block. Here are the steps to do that:

STEP #1: Create a blank Word document. Change the font size to 9 pt. Change the line spacing to 0 pt Before and 0 pt After and use Single line spacing.

STEP #2: Copy the code block text from its source and paste it as text into the Word document. You must paste the code block text as text (you cannot use the <Ctrl> + <V> keypair to paste).

STEP #3: Using Word's Replace feature, backtick all occurrences of the "<" and ">" characters. To do this, enter "<" (without the quotes) in the "Find what" input box. Then enter "`<`" (the "<" character surrounded by backticks, without quotes) in the "Replace with" input box. Click the Replace All button to replace all < characters with `<`. Then do the same thing for the ">" character.

STEP #4: Replace the backtick characters in the `<` and `>` characters with the <code> and </code> HTML tags. To do this, enter the backticked `<` character in the "Find what" input box. In the "Replace with" input box enter <code><</code>. Click the Replace All button to replace all backticked `<` characters with <code><</code>. Follow the same process to replace the backticked `>` character with <code>></code>.

STEP #5: Change all paragraph marks to manual line breaks. This Step is necessary so that the block of code text renders as a single paragraph instead of a collection of paragraphs. When the code block text is imported into Word, Word inserts a paragraph mark at the end of each line of code. This creates a collection of multiple paragraphs and will completely screw up how the code is displayed in an Avada Text Block Element.

To replace paragraph marks with manual line breaks, use the Special feature of the Word Replace function. You do this by clicking the More button in the Replace window, which causes the Special button to appear. Place your cursor in the "Find what" input box, then click the Special button and select "Paragraph Mark." Next, place your cursor in the "Replace with" input box and click the Special button. Select "Manual Line Break." Finally, click the Replace All button to replace all paragraph marks with manual line breaks.

STEP #6: Select the entire Word code block text by using the <Ctrl> + <A> keypair. Then copy the Word code block text to the clipboard using the <Ctrl> + <C> keypair. Open the Avada Text Block element, delete any exiting text, and paste the copied Word code block text into the Avada Text Block element using the <Ctrl> + <V> keypair. Save the Avada Text Block element, then Update the Avada web page. The Avada web page must be Updated or the changes made to the Text Block element will not be saved.

STEP #7. View the web page. The code block text should have every "<" and ">" character surrounded with the <code> and </code> HTML tags. Obviously this is not what you want. To get the code block text to display correctly, the Avada Text Block must be opened and saved one more time, and the web page Updated. Once this has been done the code block text should display "<" and ">" characters as text.

The nice thing about this process is that if you ever have to edit the Avada Text Block element in the future your existing "<" and ">" characters will not be changed when the Avada Visual editor opens! Just remember, if you add "<" or ">" characters to the Avada Text Block element be sure to escape EACH "<" and ">" with backticks.

Cleaning Up Large Amounts of Code Text

The above solution works fine when creating new code text using the Avada Visual editor, but it is completely impractical to use when importing a large block of code text. That's because every "<" and ">" character would have to be manually escaped. To solve this problem I use Microsoft Word to process the code block text before I copy it into an Avada Text Block. Here are the steps to do that:

STEP #1: Create a blank Word document. Change the font size to 9 pt. Change the line spacing to 0 pt Before and 0 pt After and use Single line spacing.

STEP #2: Copy the code block text from its source and paste it as text into the Word document. You must paste the code block text as text (you cannot use the <Ctrl> + <V> keypair to paste).

STEP #3: Using Word's Replace feature, backtick all occurrences of the "<" and ">" characters. To do this, enter "<" (without the quotes) in the "Find what" input box. Then enter "`<`" (the "<" character surrounded by backticks, without quotes) in the "Replace with" input box. Click the Replace All button to replace all < characters with `<`. Then do the same thing for the ">" character.

STEP #4: Replace the backtick characters in the `<` and `>` characters with the <code> and </code> HTML tags. To do this, enter the backticked `<` character in the "Find what" input box. In the "Replace with" input box enter <code><</code>. Click the Replace All button to replace all backticked `<` characters with <code><</code>. Follow the same process to replace the backticked `>` character with <code>></code>.

STEP #5: Change all paragraph marks to manual line breaks. This Step is necessary so that the block of code text renders as a single paragraph instead of a collection of paragraphs. When the code block text is imported into Word, Word inserts a paragraph mark at the end of each line of code. This creates a collection of multiple paragraphs and will completely screw up how the code is displayed in an Avada Text Block Element.

To replace paragraph marks with manual line breaks, use the Special feature of the Word Replace function. You do this by clicking the More button in the Replace window, which causes the Special button to appear. Place your cursor in the "Find what" input box, then click the Special button and select "Paragraph Mark." Next, place your cursor in the "Replace with" input box and click the Special button. Select "Manual Line Break." Finally, click the Replace All button to replace all paragraph marks with manual line breaks.

STEP #6: Select the entire Word code block text by using the <Ctrl> + <A> keypair. Then copy the Word code block text to the clipboard using the <Ctrl> + <C> keypair. Open the Avada Text Block element, delete any exiting text, and paste the copied Word code block text into the Avada Text Block element using the <Ctrl> + <V> keypair. Save the Avada Text Block element, then Update the Avada web page. The Avada web page must be Updated or the changes made to the Text Block element will not be saved.

STEP #7. View the web page. The code block text should have every "<" and ">" character surrounded with the <code> and </code> HTML tags. Obviously this is not what you want. To get the code block text to display correctly, the Avada Text Block must be opened and saved one more time, and the web page Updated. Once this has been done the code block text should display "<" and ">" characters as text.

The nice thing about this process is that if you ever have to edit the Avada Text Block element in the future your existing "<" and ">" characters will not be changed when the Avada Visual editor opens! Just remember, if you add "<" or ">" characters to the Avada Text Block element be sure to escape EACH "<" and ">" with backticks.

Source Link
Bill Vallance
Bill Vallance
  • 121
  • 5

After more experimentation I found a solution. I had been using the single quote character ( ' ) as the escape character for the <, >, &lt;, and &gt; characters. That's not the correct escape character - it is the backtick character ( ` ), which is located on the tilde key ( ~ ), which is to the left of the "1" key on English keyboards.

I initially tried escaping entire HTML tags (e.g., <ENCRYPTOPTION>), but that didn't work. I discovered that I had to escape the individual <, >, &lt;, and &gt; characters that enclose an HTML tag name. For example, to escape the ENCRYPTOPTION tag I escaped the tag as <ENCRYPTOPTION>. NOTE: The reader of this answer won't see the individual backticks in this answer because Stack Exchange visually displays escaped characters with a light gray background.

As soon as one of the <, >, &lt;, and &gt; characters is escaped with backtick characters the Avada editor changes the left backtick character to the <code> tag and the right backtick character to the </code> tag. In the Avada Visual editor this is displayed as a light gray background for each escaped character (just like it is displayed in this answer). In the Avada Text editor the <code> and </code> tags are visible, but they surround the &lt; and &gt; characters instead of the < and > characters (the &lt; and &gt; characters are the text equivalent of the < and > characters).

The Code button in the standard Avada Text editor can be used to escape <, >, &lt;, and &gt; characters instead of typing backtick characters. But in the standard Avada Visual editor there is no Code button available (it is only available in the Text editor). If you need to use a Code buton in the Avada Visual editor, the Advanced Editor Tools (previously named TinyMCE Advanced) plugin will provide a Code button. NOTE: You must first enable the Code button to be displayed in the plugin's Settings.