Background

Once one employs shortcut in YouTube, the wordpress parser goes into overdrive mode and tries its best to render the shortcode.

The opportune rendering often gets in the way of code sharing.

 

Goal

In this code we will share how to embed the shortcode for embedding youtube videos.

WordPress

Embed with a shortcut

Link

Image

 

Options

Outline

Here are some options to suspend shortcut rendering when attempting to share code.

1. HTML
   • HTML Tag
     • HTML Preformatted Tag ( <pre></pre> )
     • HTML Code Block Tag ( <code></code> )
     • HTML Preformatted & Code Block Tag ()
2. Markdown
   • Markdown Code ( “` )
3. Plugin
   • Syntax Highlighting

 

HTML

HTML Tag

HTML Preformatted Tag ( <pre></pre> )

Outline

1. We will use the pre tag
2. We will escape the opening and closing brackets
   • Specifics
     • from [ to [[
     • from ] to ]]

HMTL Code Image

 

HTML Code Text

[youtube https://www.youtube.com/watch?v=JDb3ZZD4bA0&start=75&end=500]

 

 

 

HTML Code Tag ( <code></code> )

Outline

1. We will use the code tag
2. We will escape the opening and closing brackets
   • Specifics
     • from [ to [[
     • from ] to ]]

HMTL Code Image

 

HTML Code Text

[youtube https://www.youtube.com/watch?v=JDb3ZZD4bA0&start=75&end=500]

 

 

HTML Preformatted ( Pre ) & Code Tag ( <code></code> )

Outline

1. We will use both the pre and code tags
   • The outer tag will be the pre tag
   • And, the inner tag will be the code tag
2. We will escape the opening and closing brackets
   • Specifics
     • from [ to [[
     • from ] to ]]

HMTL Code Image

 

HTML Code Text

[youtube https://www.youtube.com/watch?v=JDb3ZZD4bA0&start=75&end=500]

 

Markdown

Code ( )

Markdown Code Block ( )

Outline

1. We will use the markdown tag

Markdown Code Block Image

 

Markdown Code Block Text

[youtube https://www.youtube.com/watch?v=JDb3ZZD4bA0&start=75&end=500]

 

Syntax Code Highlighting

Code ( code )

Syntax Code Highlighting ( code )

Outline

1. We will use the syntax Highlighting Code Plugin
   • options
     • autolinks=”false”
     • language=’html’

Syntax Code Highlighting ( code ) – Image

Syntax Code Highlighting ( code ) – Text

[youtube https://www.youtube.com/watch?v=V8XFpxvsh4Y&start=1010&end=1225] 

 

Summary

In this post we attempted a few options for demonstrating how to embed youtube videos on a wordpress page.

The options tried are:-

1. HTML
   • HTML Tag
     • HTML Tag Pre
     • HTML Tag Code
     • HTML Tag +Pre +Code
2. Markdown
   • Markdown Tag
     • Source Code Block
3. Plugin
   • Syntax Code Highlighting

 

References

1. WordPress
   • Content and Media > Blocks > Embed Blocks > YouTube
     • YouTube
       Link
   • Content and Media > Blocks > SyntaxHighlighter Code Block
     • SyntaxHighlighter Code Block
       Link
2. HostPapa
   • Knowledge Base
     • How to display code in WordPress posts and pages
       Link
3.  StackOverflow
   • Why does HTML5 recommend putting the code element inside pre?
     Link