I am using Jekyll to create a static website.
I want to use _config.yml to configure rouge in kramdown.
After looking through the documentation for jekyll and kramdown, I found that it mentions
Furthermore all Rouge options (e.g. ‘line_numbers’) can be set directly on the ‘syntax_highlighter_opts’ option (where they apply to code spans and code blocks) and/or on the ‘span’/’block’ keys.
But I can't find where the "all Rouge options" are.
Where can I find "all Rouge options"?
Maybe this is what you are looking for?
The Rouge syntax highlighter supports the following keys of the option
‘syntax_highlighter_opts’:
default_lang The default language that should be used when no language
is set. guess_lang If no specific language or a default language is
set, guess the language. formatter A custom Rouge formatter class that
should be used instead of the following default formatter (Rogue 1.x:
Rouge::Formatters::HTML / Rogue 2.x: Rouge::Formatters::HTMLLegacy).
If this setting is a string, it needs to contain the name of a
constant under the Rouge::Formatters namespace.
Note: The formatter class needs to respond to ::new(opts), where opts
is a hash of options, and to #format which needs to return the HTML
formatted source code.
disable If set to true, highlighting with Rouge will be disabled.
Should probably not be set globally but inside the ‘span’ or ‘block’
options.
span A key-value map of options that are only used when syntax
highlighting code spans. block A key-value map of options that are
only used when syntax highlighting code blocks. Furthermore all Rouge
options (e.g. ‘line_numbers’) can be set directly on the
‘syntax_highlighter_opts’ option (where they apply to code spans and
code blocks) and/or on the ‘span’/’block’ keys.
Related
My github jekyll structure looks like next:
after I enter _posts and create .md file, it looks like:
the corresponding code is:
Generics were introduced to the Java language to provide tighter type checks at compile time and to support generic programming.
The generics looks like:
```Java
List<String> list = new ArrayList<>();
//add item to list
String s = list.get(0);
```
or
```Java
public class Box<T> {
// T stands for "Type"
private T t;
//other code
}
```
The most commonly used type parameter names are:
```
E - Element (used extensively by the Java Collections Framework)
K - Key
```
We can see that the format is nice, such as it has syntax highlight.
I called it preview page
However, when I enter into my page by typing my github page url to see, it likes:
I called it real page
We can see that real page looks bad, e.g. there is no syntax highlight, there are multiple borders for quoting code syntax etc.
Thus, how to make the real page format is the same as preview page?
I suppose that you're relatively new to Jekyll so I have to do some clarification to you.
The result that you call "preview" is the result of your markdown parsed by GitHub. All markdowns have something in common so it's very likely that even if your parser is different almost all the things are parsed similarly. You could see a difference at the beginning of your "preview": the yaml content is displayed as a table.
Let's come back to Jekyll. If you're using the default settings, the parser of your code is kramdown (you could change it in the _config.yml file). When you execute Jekyll, it builds your website. That means that it parses your markdown and convert it to HTML. How it converts to HTML depends on a lot of things based on your configuration and plugin installed.
By default, you have no highlight. If you want to change it, take a look at the jekyll documentation. By default, it uses Rogue but you can also use Pigments or some other highlighter of your choice.
I don't think that this answer covers all your doubts and certainly not all your problems but it's to let you understand that your question, as it was posted, have not so much sense since your "preview page" and your "real page" are two completely distinct things. So google a bit, find what you want to achieve and ask a new question (you will surely have one in the near future).
Happy coding!
I use custom code snippet for Sublime Text like custom comments, function, reusable block code, CDN and more.. but I could not do that in WebStorm and PhpStorm IDE.
Here is my building block code snippet (comments) for Sublime Text:
/*============================
comments
============================*/
and this code blocks for HTML5 comments
<!-----------------------
comments
----------------------->
Moreover I'm new user for JetBrains software. Can I use custom code snippet above in JetBrains software ?
It's called Live Templates in JetBrains IDEs.
Available at Settings/Preferences | Editor | Live Templates.
You can use existing Live Templates as is, alter them to your needs or create your own.
Creating own is better be done in own group -- they will be stored in separate config file so easier to share, no possible conflicts with built-in ones (easier to update between versions etc.). It also makes perfect sense to use separate group per language -- the same abbreviation can be used for different languages/context but abbreviation within the same group must be unique.
BTW -- I'd say -- do not edit built-ins at all -- just disable specific built-in template and create your own version of it in separate group. This way you can always see what fix/change devs have made in new IDE version etc.
Full official tutorial/how-to is available here: https://confluence.jetbrains.com/display/PhpStorm/Live+Templates+%28Snippets%29+in+PhpStorm
You may also be interested in other articles:
https://confluence.jetbrains.com/display/PhpStorm/Tutorials
in particular (since you have used Sublime in the past): https://confluence.jetbrains.com/display/PhpStorm/PhpStorm+for+Users+of+Text+Editors
Finally I get a tips ! PhpStorm allows you to create your own live templates (code snippets) to optimise your workflows.
Open the settings dialog and head into Editor | Live Templates, you can see the available live templates grouped by language. To add a new template click the + (plus) button and select Live Template. Specify the abbreviation (the short bit of text you type that will be expanded to the full code snippet) and a description.
Then provide the full code snippet in the Template text field. You can include variables in the template in the format $<variable name>$, which will allow you to provide values when the template is expanded. PhpStorm recognises $END$ as a special variable indicating the final position of the cursor after the template has been expanded and values have been provided for all variables.
Next click the Define warning text to specify which language the template is for and optionally the context it is available in.
Now the template is ready to be used. Open a file and type the abbreviation that was specified earlier, then hit Tab to expand the template. The cursor will be positioned on the first variable, provide a value then hit Tab to keep moving through all available variables. The final position of the cursor will be the location of the $END$ variable.
Further Reading
Creating & Editing Live Templates
I don't think you can do this, however you can add custom tags in Settings > Editor > TODO.
//TODO & //FIXME are already implemented.
But this custom tags are not working for HTML.
Maybe you can find an extension to do that in Settings > Plugins.
I want to use kramdown (with features such as fenced code blocks, inline attribute lists, header IDs) together with pygments for syntax highlighting (e.g. for LaTeX support, which is not available with CodeRay used by kramdown). Jekyll supports both kramdown and pygments, but apparently not the two together (unless I use Liquid tags which I would prefer not to).
I've also found some plugin snippets of how to make kramdown fenced code blocks spit pygments highlighted code, but unfortunately I don't know how to make that work.
I tried dumping all of the code from that site on some _plugins/krampygs.rb file, but then jekyll build complains about:
Generating... error: undefined method `matches'
If I supply some trivial matches and output_ext as instructed by Jekyll plugin docs, but then I don't know how to select this new converter for my .md files. Adding something like
markdown: MarkdownConverter
on my _config.yml only complains that this is not a valid option.
So, well, I restate my question: How can I use kramdown with pygments in Jekyll?
Solution
With the help of Matthias (below), I was able to prepare this Kramdown+Pygments plugin for Jekyll 1.x.
Author of "that site" here.
It depends on the Jekyll version. For the version when the post was written, that was enough. At least Jekyll 1.x requires that matches is defined in the MarkdownConverter, like so:
def matches(ext)
ext =~ /^\.md$/i
end
Another problem that appears with Jekyll 1.x is that every custom Markdown converter is ignored. I worked around this by by stating the output extension explicitly
def output_ext(ext)
".html"
end
and tell Jekyll that to look for a bogus Markdown extension by setting
markdown_ext: foo
in _config.yml.
I have updated the plugin created by Juan, to be compatible with Jekyll 2.x, along with some other improvements.
It can be found here: https://github.com/mvdbos/kramdown-with-pygments.git
PhpStorm can apply code style rules for specific languages with the Reformat Code command. PhpStorm can also recognize a language embedded within a file of another language (known in PhpStorm as 'Language Injection'). So, I expect that a language would be subject to its code style rules wherever the language is used -- whether embedded or in its own file.
I've found that this works as expected for css/js within an html file, but not for language injections within PHP files. PhpStorm will recognize css within a heredoc, and html as a heredoc and in single- and double- quoted strings -- yet reformatting does not work in any of these cases.
Short of using an intermediary file to reformat the code, how can I get PhpStorm to reformat these sections of code? I am using PhpStorm 6.0.3 for Mac.
Their documentation states:
PhpStorm supports full coding assistance for:
CSS and JavaScript in an HTML or XML file.
CSS, JavaScript, and SQL outside PHP code blocks and inside PHP string literals.
The second bullet seems only half true, as css/js/sql are recognized but not subjected to code styles inside PHP string literals. And injected html is not specified; but between PhpStorm recognizing the language injections and its capability to apply code styles to an arbitrary selection, all the pieces for formatting embedded languages seem to be there. What am I missing?
To reformat injected code according to PhpStorm code styles Preferences, select the injected code and open the Intention Actions list (Alt+Enter), and select "Edit __ Fragment" to edit it in it's own dedicated window (documentation). In this window, code formatting will work as expected.
Different projects can use different indentation styles (2-4 spaces, tabs) and I want my custom snippets to follow the style of the current file. The built-in Ruby snippets does this but my custom snippets retain the indentation of the snippet. I checked the docs and found the predefined variables:
$TM_SOFT_TABS YES if translate_tabs_to_spaces is true, otherwise NO.
$TM_TAB_SIZE Spaces per-tab (controlled by the tab_size option).
But I can't really see how to make use of those to control which indents to use.
Just use the tab character for indents in snippet files. Sublime Text will automatically convert them to the correct indentation style for the current file.