Add code snippets style

[anthonydillon]

Currently the logic behind the background colour of code snippets is a lighter version of the brand color. This works for Ubuntu as it gives us the correct light orange but in the case of Canonical it makes the code snippets light pink.

Should we sent the background to a set colour or if there something clever we can do with the brand colour in all situations?

We have a new code style now on Ubuntu and Cloud which have a purple background. Should we use that?

[yaili]

Yes, let's use the new style.

[yaili]

I've found two different styles for the default pre tag:

I'm assuming the black version is the latest one, so we should incorporate that in Vanilla. /cc @Lucapaulina

[anthonydillon]

This is the latest code snippet design:

[richmccartney]

I think they should all be reviewed. We don't have a definitive code block style as well. We need to add the copy style to them and maybe code line numbers as well.

[Lucapaulina]

The black style is the latest one for code. We use the example Ant linked for short snippets but not code blocks.

On Mon, 7 Mar 2016, 14:55 Richard McCartney, notifications@github.com wrote:

I think they should all be reviewed. We don't have a definitive code block style as well. We need to add the copy style to them and maybe code line numbers as well.

— Reply to this email directly or view it on GitHub https://github.com/ubuntudesign/vanilla-framework/issues/290#issuecomment-193282671 .

[richmccartney]

Yeah on MAAS we have large code blocks for YAML and XML output. These all have code line numbers similar to GigHub

[yaili]

Agreed at off-site:

• .code: < code > element (Vanilla)
• .code-block: white/light with numbers (Vanilla)
• .code-block--terminal: dark (Vanilla)
• .code-snippet: white/light with copy-to-clipboard (Vanilla)
• .code-snippet--terminal: dark with copy-to-clipboard (Vanilla)

[yaili]

@anthonydillon Has this been done?

[anthonydillon]

No, the code snippets just have mono font at the moment.

On Mon, 9 May 2016 at 14:16 Inayaili de León Persson < notifications@github.com> wrote:

@anthonydillon https://github.com/anthonydillon Has this been done?

— You are receiving this because you were mentioned.

Reply to this email directly or view it on GitHub https://github.com/ubuntudesign/vanilla-framework/issues/290#issuecomment-217860961

[yaili]

@anthonydillon You're assigned to this bug. Are you working on this, or should it be re/de-assigned?

[anthonydillon]

Unassign please. Not sure why I was assigned.

On Mon, 9 May 2016 at 15:31 Inayaili de León Persson < notifications@github.com> wrote:

@anthonydillon https://github.com/anthonydillon You're assigned to this bug. Are you working on this, or should it be re/de-assigned?

— You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub https://github.com/ubuntudesign/vanilla-framework/issues/290#issuecomment-217880991

[dholbach]

This would be super important to us in the Community team, as we'd like to adopt this for developer.ubuntu.com.

[dholbach]

Are you going to support different programming languages and markup in the <code> blocks?

[deadlight]

That's definitely something to aim for but, initially, we just need to standardise our current usage.

[dholbach]

I just learned from @caldav that we're using a different piece of code for programming languages, etc. Still having this bug fixed would help us a lot in a future move to Vanilla.

[barrymcgee]

Fixed by #370

[dholbach]

Nice one!