How to change code tag formatting for 2.1b2 to match this forum?

openletter · October 2013

The default code formatting in 2.1b2 is just a yellow highlight, but this forum (vanillaforums.org) uses a much cleaner and easier to read code format, especially for multi-line code blocks, and I love the way the lines are numbered but aren't copied to the clipboard! How can I get this in my forum? Thanks!

vrijvlinder · October 2013

That can be anything you want, just apply your own css to the formatting

for example:

   code, pre {
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
background: #ff9;
padding: 4px 8px;
white-space: pre;
font-family: monospace;
overflow: auto;
border: 1px solid #eec;
}

vrijvlinder · October 2013

The lines with numbers are also achieved in this manner , the example below is the background of the alternating numbered rows.

pre, code {
background-color:#fafafa;
border-color:#aaa;
}

In this forum they use a Prettify Plugin to do this I believe.

Shadowdare · October 2013

They use Google Code Prettify script with some CSS and JS to make it work on Vanilla. http://code.google.com/p/google-code-prettify/

openletter · October 2013

Thanks, @vrijvlinder. I've only recently introduced myself to HTML/CSS. This change is added to the CSS file? Where is the CSS file? When I view the source for my forum, I see /forums/utility/css/style/style-0b2c6b4c.css, but there is no /utility/ subdirectory in /forums/.

vrijvlinder · October 2013

To make these changes you would go to the theme custom.css file.

are you using default theme ? or a custom?

If on default theme you should create a custom.css file and stick it in the design folder of the default . If there is no design folder create one too.

Otherwise use a custom theme.

the themes, are in forum/themes

Please do not use Minify or Pagespeed.

Shadowdare · October 2013

You must create a custom.css file for all custom CSS code. All CSS changes will go in there as you should avoid modifying any files from Vanilla default files. http://vanillawiki.homebrewforums.net/index.php/Themes

openletter · October 2013

@vrijvlinder I am using the default theme - I'm big on defaults these days as I saw an acquaintance get burned on a non-default theme issue in a different software package not long ago. By Minify or Pagespeed, do you mean $Configuration['Garden']['CombineAssets'] = TRUE;? I did add that to my config.php file.

@Shadowdare I am reviewing the wiki article you linked to. Will I run into any issues on updates to Vanilla by using my own custom theme?

vrijvlinder · October 2013

No I mean the Plugins Minify or PageSpeed , they interfere with editing and it is hard to figure out where the code it at because it mixes it up.

Will I run into any issues on updates to Vanilla by using my own custom theme?

Yes if you edit the default style and possibly because the theme is called default, the new update will overwrite it. That is why it is recommended to make a new theme even if it is a clone of the default and call it something else. The Update will not overwrite custom custom themes that are not in the update packages. The same goes for plugins.

Any mods you make to plugins you must save before updates or they may get overwritten if they are in the package.

openletter · October 2013

In the source for this forum, I can see

<link rel="stylesheet" type="text/css" href="/plugins/GooglePrettify/design/prettify.css?v=1.2" media="all" />

and

<script src="/plugins/GooglePrettify/js/prettify.js?v=1.2" type="text/javascript"></script>.

The CSS document includes the statement Pretty printing styles. Used with prettify.js. I did find the plugin GoogleCodePrettify, but that appears to be a different plugin than the one being used in the vanillaforums.org forums.

Maybe I'm asking for more than I realize here, but is there a way to somehow get the plugin currently being used?

BTW - I did make a custom theme as per the wiki that I'm now running my forum on.

Srggamer · October 2013

@Openletter URL of your website please?

openletter · October 2013

@Srggamer http://www.unpm.org/forums - please keep in mind that the site is in development. I've only installed Vanilla forums 3 times now. (o;

Srggamer · October 2013

Thanks I'll look into this. And possibly alert some spammers! (Im joking)

openletter · October 2013

LOL... well, they certainly won't get many click-throughs. And besides, it's got reCAPTCHA enabled, so it's impenetrable!

vrijvlinder · October 2013

@openletter

here is a modified version of that plugin which should work for you, you may need to update the prettify.js file from google . Please let me know how it works out.

openletter · October 2013

@vrijvlinder I unzipped and placed the plugin into the plugins folder, uploaded prettify.js from Google, and enabled. Doesn't seem to work quite right.

vrijvlinder · October 2013

Can you elaborate ?

vrijvlinder · October 2013

I tested this plugin on a 2.1 install I have, it seems to be missing inserting the numbered lines .... I will play with it and see what I can do....

openletter · October 2013

@vrijvlinder here is what I get on my forum.

vrijvlinder · October 2013

Right, I see that too and it is missing to add the numbered list class to each line. It may only work with markup . What is your input formatter?

openletter · October 2013

Markdown

How to change code tag formatting for 2.1b2 to match this forum?

Comments