• 0

How to add code snippets in post

Question

Posted · Report post

Hi,

 

I want to add code snippets in my posts and pages, like this.

<p>This is a paragraph</p>

What I do is this:

<code><p>This is a paragraph</p></code>

But is only outputs the text 'this is a paragraph.

 

What should I do? 

 

Kind regards,

 

Willem

Share this post


Link to post
Share on other sites

11 answers to this question

  • 0

Posted · Report post

Hi Willem,

 

Is this not convered in our shortcodes doc ? Hmm must of missed that, ill make a note now and add it later.

 

Basically, we have implemented Google Prettyprint.

 

So first things first, go to DMS ToolBar > Global Options > Advanced  and enable Goolge PrettyPrint. Once enabled, add the following shortcode to your actually code.

 

For example.

 

[pl_codebox]
<div class="example">
<h1 class="example">Hello World!</h1>
</div>
[/pl_codebox]
 
This will make your code look pretty :D Like this:

http://cl.ly/image/0435310Z1O0y

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

One question left, why is DMS only using 'pre' for the output. When I look at this doc: http://www.w3.org/html/wg/drafts/html/master/grouping-content.html#the-pre-element

 

I see they do it like this, so pre + code.

<pre><code>function Panel(element, canClose, closeHandler) {
  this.element = element;
  this.canClose = canClose;
  this.closeHandler = function () { if (closeHandler) closeHandler() };
}</code></pre>

About the language being used, this page is telling me: http://www.w3.org/html/wg/drafts/html/master/text-level-semantics.html#the-code-element

 

There is no formal way to indicate the language of computer code being marked up. Authors who wish to mark code elements with the language used, e.g. so that syntax highlighting scripts can use the right rules, can use the class attribute, e.g. by adding a class prefixed with "language-" to the element.

 

 

This is now being add to the 'pre' with the output of DMS.

 

So is DMS following the correct html rules here?

 

Hope to hear from you.

 

Kind regards,

 

Willem

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Willem, 

 

As you're aware, the moderators (Danny, James, Martin and myself) are not developers.  The only way to know for sure is to test it out.  We cannot ask the developers questions at this time, nor distract them from their round-the-clock work to restore things.  Apologies.

 

A simple test of that method shouldn't be difficult. 

 

Let us know the results of your test.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

The only way to output code using the Google Prettify function of Pagelines is with the shortcode. And like I told in the previous post, the HTML output from the shortcode is not following the recommendations from HTML5.

The output isn't wrong, let me make that clear, but it's just a recommendation I'm talking about. 

 

Google prettify does not work with when I just use the 'pre' and 'code' tags in my posts, and that I regret. The reason why I find that a pity is because I don't want to use shortcodes to much. When I ever change to a system that's not working with these shortcodes, I have a problem ;-).

 

I found an simple plugin that makes the Google Prettify work when I use the normal 'pre' and 'code' tags. But I would have loved it if this was also the case with Pagelines DMS, and not that it only works using the shortcode. 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

We'll tell our developers.  That's all we can do.  Thank you for the information.

1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

:D

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi Rob, can you explain me why CSS is being added for <pre> and <code> in utilities.less and typography.less?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Absolutely no idea Willem.  I'm sorry. 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now