New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Provide information for how to change pygments CSS / theme #637

Closed
reyman opened this Issue Sep 21, 2013 · 3 comments

Comments

Projects
None yet
4 participants
@reyman

reyman commented Sep 21, 2013

Hi,
Using :source-highlighter: pygments is there a way to change the pygments css style to other style than default proposed by asciidoctor ?

@graphitefriction

This comment has been minimized.

Show comment
Hide comment
@graphitefriction

graphitefriction Oct 24, 2013

Member

Hi!

By default, Asciidoctor uses the pastie style. To change the style, set the pygments-style attribute and assign it the alternate style's name. In the example document below, I used the manni style.

= Alt Pygments theme
:source-highlighter: pygments
:pygments-style: manni

Regular text

[source,ruby]
----
ORDERED_LIST_KEYWORDS = {
  'loweralpha' => 'a',
  'lowerroman' => 'i',
  'upperalpha' => 'A',
  'upperroman' => 'I'
   #'lowergreek' => 'a'
   #'arabic'     => '1'
   #'decimal'    => '1'
}
----

When rendered, it looks like this:

image

To see what pygments styles you have installed, open a terminal and type:

pygmentize -L styles

It will output the style names and brief descriptions.
For example, I'm using pygments 1.4, so the following styles are available to me:

Styles:

* monokai:
    This style mimics the Monokai color scheme.
* manni:
    A colorful style, inspired by the terminal highlighting style.
* perldoc:
    Style similar to the style used in the perldoc code blocks.
* borland:
    Style similar to the style used in the borland IDEs.
* colorful:
    A colorful style, inspired by CodeRay.
* default:
    The default style (inspired by Emacs 22).
* murphy:
    Murphy's style from CodeRay.
* vs:

* trac:
    Port of the default trac highlighter design.
* tango:
    The Crunchy default Style inspired from the color palette from the Tango Icon Theme Guidelines.
* fruity:
    Pygments version of the "native" vim theme.
* autumn:
    A colorful style, inspired by the terminal highlighting style.
* bw:

* emacs:
    The default style (inspired by Emacs 22).
* vim:
    Styles somewhat like vim 7.0
* pastie:
    Style similar to the pastie default style.
* friendly:
    A modern style based on the VIM pyte theme.
* native:
    Pygments version of the "native" vim theme.

Note: At this time the background color present in some of the pygments styles is not used.

Thank you for pointing out that this wasn't documented! I've created a documentation issue for it: #162

Member

graphitefriction commented Oct 24, 2013

Hi!

By default, Asciidoctor uses the pastie style. To change the style, set the pygments-style attribute and assign it the alternate style's name. In the example document below, I used the manni style.

= Alt Pygments theme
:source-highlighter: pygments
:pygments-style: manni

Regular text

[source,ruby]
----
ORDERED_LIST_KEYWORDS = {
  'loweralpha' => 'a',
  'lowerroman' => 'i',
  'upperalpha' => 'A',
  'upperroman' => 'I'
   #'lowergreek' => 'a'
   #'arabic'     => '1'
   #'decimal'    => '1'
}
----

When rendered, it looks like this:

image

To see what pygments styles you have installed, open a terminal and type:

pygmentize -L styles

It will output the style names and brief descriptions.
For example, I'm using pygments 1.4, so the following styles are available to me:

Styles:

* monokai:
    This style mimics the Monokai color scheme.
* manni:
    A colorful style, inspired by the terminal highlighting style.
* perldoc:
    Style similar to the style used in the perldoc code blocks.
* borland:
    Style similar to the style used in the borland IDEs.
* colorful:
    A colorful style, inspired by CodeRay.
* default:
    The default style (inspired by Emacs 22).
* murphy:
    Murphy's style from CodeRay.
* vs:

* trac:
    Port of the default trac highlighter design.
* tango:
    The Crunchy default Style inspired from the color palette from the Tango Icon Theme Guidelines.
* fruity:
    Pygments version of the "native" vim theme.
* autumn:
    A colorful style, inspired by the terminal highlighting style.
* bw:

* emacs:
    The default style (inspired by Emacs 22).
* vim:
    Styles somewhat like vim 7.0
* pastie:
    Style similar to the pastie default style.
* friendly:
    A modern style based on the VIM pyte theme.
* native:
    Pygments version of the "native" vim theme.

Note: At this time the background color present in some of the pygments styles is not used.

Thank you for pointing out that this wasn't documented! I've created a documentation issue for it: #162

@llaville

This comment has been minimized.

Show comment
Hide comment
@llaville

llaville Nov 20, 2013

@graphitefriction Hello,

I would like to share my experience, now I used your cool infos.

I works on a Bootstrap backend for AsciiDoc and I've implemented this pygment feature in my upcoming version 3.1 (not yet official).

And I found the solution about your latest comment
"At this time the background color present in some of the pygments styles is not used"

You can fix this issue with a CSS rule

.highlight pre {
    background-color: transparent;
}

See the page below that demonstrate it with two styles used on same page.
http://laurent-laville.org/asciidoc/bootstrap/manual/3.1/en/source-code-highlight.html

Enjoy !
Laurent

llaville commented Nov 20, 2013

@graphitefriction Hello,

I would like to share my experience, now I used your cool infos.

I works on a Bootstrap backend for AsciiDoc and I've implemented this pygment feature in my upcoming version 3.1 (not yet official).

And I found the solution about your latest comment
"At this time the background color present in some of the pygments styles is not used"

You can fix this issue with a CSS rule

.highlight pre {
    background-color: transparent;
}

See the page below that demonstrate it with two styles used on same page.
http://laurent-laville.org/asciidoc/bootstrap/manual/3.1/en/source-code-highlight.html

Enjoy !
Laurent

@mojavelinux

This comment has been minimized.

Show comment
Hide comment
@mojavelinux

mojavelinux Nov 23, 2013

Member

Hey Laurent! I'm glad to see you here. Great job with the Bootstrap 3 backend. It's lookin' good!

I took a slightly different approach to resolving the background color issue with Pygments. Instead of forcing it to be transparent, I fixed the stylesheet to honor the setting from Pygments. Now, all the Pygments themes should work out of the box.

Here's the commit with the change:

76d9988

We'll need to update the documentation for Asciidoctor to let people know they no longer have to worry about this issue.

Member

mojavelinux commented Nov 23, 2013

Hey Laurent! I'm glad to see you here. Great job with the Bootstrap 3 backend. It's lookin' good!

I took a slightly different approach to resolving the background color issue with Pygments. Instead of forcing it to be transparent, I fixed the stylesheet to honor the setting from Pygments. Now, all the Pygments themes should work out of the box.

Here's the commit with the change:

76d9988

We'll need to update the documentation for Asciidoctor to let people know they no longer have to worry about this issue.

graphitefriction added a commit to graphitefriction/asciidoctor.org that referenced this issue Jul 16, 2014

updates syntax highlighting examples
- adds pygments attributes and example snippet
- adds coderay section
- adds coderay attributes
- adds pygments output image
- closes asciidoctor#162
- closes asciidoctor/asciidoctor#637
- documents asciidoctor/asciidoctor#604
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment