From c7617dd9ef36d6d3592d5b7ddcc72dff1fb9c127 Mon Sep 17 00:00:00 2001 From: RunDevelopment Date: Sun, 22 Nov 2020 15:25:47 +0100 Subject: [PATCH] Website: Added and updated documentation --- assets/style.css | 10 ++++------ index.html | 41 +++++++++++++++++++++++++++-------------- 2 files changed, 31 insertions(+), 20 deletions(-) diff --git a/assets/style.css b/assets/style.css index e86e07409a..d9538a830b 100644 --- a/assets/style.css +++ b/assets/style.css @@ -75,11 +75,13 @@ p { } section h1, -h2 { +h2, +h3 { margin: 1em 0 .3em; } -h2 { +h2, +h3 { font-weight: normal; } @@ -141,10 +143,6 @@ footer:before { background-repeat: repeat-x; background-image: linear-gradient(45deg, transparent 34%, white 34%, white 66%, transparent 66%), linear-gradient(135deg, transparent 34%, white 34%, white 66%, transparent 66%); -} - -header { - } header .intro, diff --git a/index.html b/index.html index 5b0b5350e9..7fe63216ba 100644 --- a/index.html +++ b/index.html @@ -95,19 +95,23 @@

Full list of features

Prism forces you to use the correct element for marking up code: <code>. On its own for inline code, or inside a <pre> for blocks of code. In addition, the language is defined through the way recommended in the HTML5 draft: through a language-xxxx class. -
  • The language definition is inherited. This means that if multiple code snippets have the same language, you can just define it once, in one of their common ancestors.
    • -
  • Supports parallelism with Web Workers, if available. Disabled by default (why?).
    • -
  • Very easy to extend without modifying the code, due to Prism’s plugin architecture. Multiple hooks are scattered throughout the source.
    • -
  • Very easy to define new languages. Only thing you need is a good understanding of regular expressions
    • -
  • All styling is done through CSS, with sensible class names rather than ugly namespaced abbreviated nonsense.
    • -
  • Wide browser support: Edge, IE11, Firefox, Chrome, Safari, Opera, most Mobile browsers
    • -
  • Highlights embedded languages (e.g. CSS inside HTML, JavaScript inside HTML)
    • -
  • Highlights inline code as well, not just code blocks
    • -
  • Highlights nested languages (CSS in HTML, JavaScript in HTML)
    • -
  • It doesn’t force you to use any Prism-specific markup, not even a Prism-specific class name, only standard markup you should be using anyway. So, you can just try it for a while, remove it if you don’t like it and leave no traces behind.
    • -
  • Highlight specific lines and/or line ranges (requires plugin)
    • -
  • Show invisible characters like tabs, line breaks etc (requires plugin)
    • -
  • Autolink URLs and emails, use Markdown links in comments (requires plugin)
    • +
  • The language-xxxx class is inherited. + This means that if multiple code snippets have the same language, you can just define it once,in one of their common ancestors.
    • +
  • Supports parallelism with Web Workers, if available. + Disabled by default (why?).
    • +
  • Very easy to extend without modifying the code, due to Prism’s plugin architecture. + Multiple hooks are scattered throughout the source.
    • +
  • Very easy to define new languages. + The only thing you need is a good understanding of regular expressions.
    • +
  • All styling is done through CSS, with sensible class names rather than ugly, namespaced, abbreviated nonsense.
    • +
  • Wide browser support: Edge, IE11, Firefox, Chrome, Safari, Opera, most mobile browsers.
    • +
  • Highlights embedded languages (e.g. CSS inside HTML, JavaScript inside HTML).
    • +
  • Highlights inline code as well, not just code blocks.
    • +
  • It doesn’t force you to use any Prism-specific markup, not even a Prism-specific class name, only standard markup you should be using anyway. + So, you can just try it for a while, remove it if you don’t like it and leave no traces behind.
    • +
  • Highlight specific lines and/or line ranges (requires plugin).
    • +
  • Show invisible characters like tabs, line breaks etc (requires plugin).
    • +
  • Autolink URLs and emails, use Markdown links in comments (requires plugin).
    • @@ -147,13 +151,22 @@

    Basic usage

    The recommended way to mark up a code block (both for semantics and for Prism) is a <pre> element with a <code> element inside, like so:

    + 
    <pre><code class="language-css">p { color: red }</code></pre>
    +

    If you use that pattern, the <pre> will automatically get the language-xxxx class (if it doesn’t already have it) and will be styled as a code block.

    -

    If you want to prevent any elements from being automatically highlighted and instead use the API, you can set Prism.manual to true before the DOMContentLoaded event is fired. By setting the data-manual attribute on the <script> element containing Prism core, this will be done automatically. +

    Note: You have to escape all < and & characters inside <code> elements with &lt; and &amp; respectively, or else the browser might interpret them as an HTML tag or entity. If you have large portions of HTML code, you can use the Unescaped Markup plugin to work around this.

    + +

    Manual highlighting

    + +

    If you want to prevent any elements from being automatically highlighted and instead use the API, you can set Prism.manual to true before the DOMContentLoaded event is fired. By setting the data-manual attribute on the <script> element containing Prism core, this will be done automatically. Example:

    + 
    <script src="prism.js" data-manual></script>
    +

    or

    + 
    <script>
 window.Prism = window.Prism || {};
 window.Prism.manual = true;