Support » Theme: P2 » Adding HTML code to P2 posts

  • Hello! I am trying to add some code to a post, the easiest way I see is using the “pre” tag

    When I try to use this in the P2 posts, it is stripping out the HTML tags and rendering the markup as plain text & with the CSS styles, instead of exactly reproducing the code.

    Please see example:
    https://p2classicdemo.wordpress.com/2016/07/29/testing-pre-tag-2-hello-world/

    That “Hello World” text is wrapped with a h2 tag, which is not being displayed as HTML.

    Love this solution for project management, please let me know if there is something I can do to get the pre (or code) tag(s) working!

    Best/Seth

Viewing 5 replies - 1 through 5 (of 5 total)
  • Siobhan Bamber (siobhyb)

    (@siobhyb)

    Automattic Happiness Engineer

    Hi Seth,

    I was able to replicate and, after a bit of research, found that this is a widely spread issue with displaying HTML as plain text.

    You can workaround it by replacing the < and > characters with the < and &gt character entities.

    Alternatively, you can consider a plugin that enables you to copy/paste HTML directly or pasting HTML to a third-party tool like pastebin.com. Some suggestions for plugins and paste tools are listed out here:

    https://codex.wordpress.org/Writing_Code_in_Your_Posts#Resources

    Let me know how if that helps you out or if you have any extra questions.

    Thank you Siobhan for your support! Would it be possible to suggest this to the Automattic team as a fix for the P2 theme? In my testing, the code tag is working in the default WordPress themes and premium themes I’m using from StudioPress.

    I can use an outside service such as gist – but embedding the content via gist doesn’t allow the text to be searchable via the search box in P2. I’m looking to have P2 be a project management and workflow utility, and being able to search code snippets would be pretty massive. Can you please forward that feedback on to the team? I know P2 isn’t a priority, but there is so much potential!

    ~Seth

    Siobhan Bamber (siobhyb)

    (@siobhyb)

    Automattic Happiness Engineer

    Hi Seth,

    What specific default themes were you able to get this working with? I tested the <pre> and <code> tags with Twenty Sixteen and Twenty Fifteen, but the HTML did not display on either theme.

    From the list of plugins and paste tools that I linked to, I gave the SyntaxHighlighter Evolved plugin a try (this is an Automattic-made plugin). The plugin enabled me to display HTML by wrapping it in [HTML] [/HTML] tags:

    [HTML]<h2>Test</h2>[/HTML]

    Could you give that plugin a try too? I think it may work well for you.

    I’m also very happy to see that you’re using P2! I agree that there’s a lot of potential.

    If you haven’t already, then you may wish to consider experimenting with O2, also:

    o2 is Now Available on GitHub

    If you download P2 Breathe and then activate O2, a “code” button will automatically appear in the front-end editor’s toolbar that you can use to display HTML. This is the version of P2 that we use internally at Automattic.

    Let me know if you have any questions around the above.

    You’re right, it was actually parsing the code in my theme. I’ll give the Automattic solution a try, hopefully it will allow the code snippets to be searchable. Thank you for the support!!

    Siobhan Bamber (siobhyb)

    (@siobhyb)

    Automattic Happiness Engineer

    You’re welcome! 🙂

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Adding HTML code to P2 posts’ is closed to new replies.