« Highlight.js » : différence entre les versions

De Banane Atomic
Aller à la navigationAller à la recherche
 
 
(24 versions intermédiaires par le même utilisateur non affichées)
Ligne 1 : Ligne 1 :
[[Category:Javascript]]
[[Category:Javascript]]
[[Category:Web]]
[[Category:Web]]
= Liens =
= Links =
* [https://highlightjs.org highlight.js]
* [https://highlightjs.org highlight.js]
* [https://highlightjs.org/static/demo/ demo]
* [https://highlightjs.org/static/demo/ demo]
Ligne 8 : Ligne 8 :
* [http://highlightjs.readthedocs.io/en/latest/language-contribution.html Language contributor checklist]
* [http://highlightjs.readthedocs.io/en/latest/language-contribution.html Language contributor checklist]
* [http://highlightjs.readthedocs.io/en/latest/css-classes-reference.html#language-names-and-aliases Language names and aliases]
* [http://highlightjs.readthedocs.io/en/latest/css-classes-reference.html#language-names-and-aliases Language names and aliases]
* [https://highlightjs.readthedocs.io/en/latest/css-classes-reference.html Scope Reference]
* [https://highlightjs.readthedocs.io/en/latest/mode-reference.html Mode Reference]


= Build =
* [https://www.mediawiki.org/wiki/Extension:Highlightjs_Integration Highlightjs Integration Mediawiki extension]
 
== External Languages ==
* [https://github.com/highlightjs/highlightjs-cshtml-razor Razor]
* [https://github.com/highlightjs/highlightjs-tsql TSQL]
 
= [https://highlightjs.readthedocs.io/en/latest/building-testing.html#building Build] =
<kode lang='bash' ext='svg'>
<kode lang='bash' ext='svg'>
git clone https://github.com/isagalaev/highlight.js
git clone https://github.com/isagalaev/highlight.js
Ligne 19 : Ligne 27 :


# création du dossier build et de ses fichiers
# création du dossier build et de ses fichiers
node tools/build.js -t browser -n :common cs cpp
node tools/build.js -t browser -n :common csharp cpp
# -t browser, target (browser, cdn, node, all)
# -t browser, target (browser, cdn, node, all)
# -n, Disable compression
# -n, Disable compression
# :common, langages de base
# :common, langages de base
# cs cpp, les langages c# et c++
# csharp cpp, les langages c# et c++
 
# the build result is in the build/ directory.
</kode>
</kode>


Ligne 30 : Ligne 40 :
* {{boxx|build/demo/index.html}}
* {{boxx|build/demo/index.html}}
* {{boxx|tools/developer.html}}
* {{boxx|tools/developer.html}}
<kode lang='bash'>
# run unit test
cd test
npm test
</kode>


= [http://highlightjs.readthedocs.io/en/latest/language-guide.html Ajouter un nouveau langage] =
= [http://highlightjs.readthedocs.io/en/latest/language-guide.html Ajouter un nouveau langage] =
<filebox fn='test/detect/[nouveau langage]/default.txt' lang=''>
* [https://highlightjs.readthedocs.io/en/latest/language-guide.html Language definition guide]
Code de démo
* [https://highlightjs.readthedocs.io/en/latest/reference.html Mode reference]
</filebox>


<filebox fn='src/languages/[nouveau langage].js' lang='javascript' collapsed>
<filebox fn='src/languages/[nouveau langage].js' lang='javascript' collapsed>
/*
/*
Language: [nouveau langage]
* Language: [nouveau langage]
Author: Moi <moi@domaine.fr>
* Requires: xml.js, csharp.js
Category: common
* Author: Moi <moi@domaine.fr>
*/
* Category: common
*/


function(hljs) {
function(hljs) {
   var KEYWORDS = {
   const KEYWORDS = {
     keyword:
    $pattern: /-[a-z]+/,
      'abc def',
     keyword: 'abc def',
     literal:
     literal: 'null false true',
      'null false true'
    type: 'string int',
    built_in: 'constant class function'
  };
 
  const comment = hljs.COMMENT(
    '//',  // tout ce qui commence par //
    '$'    // jusqu'à la fin de la ligne
  );
 
  const xxx = {
    scope: 'predefined scope',
    begin: '= ',
    end: ' ='
   };
   };


   return {
   return {
     aliases: ['aaa'],
     aliases: ['name1', 'name2'],
     keywords: KEYWORDS,
     keywords: KEYWORDS,
     illegal: /::/,
     illegal: /::/,
     contains: [
     contains: [               // Sub-modes
       hljs.COMMENT(
      comment,
        '//',  // tout ce qui commence par //
       hljs.HASH_COMMENT_MODE,  // already defined comment pattern
        '$'    // jusqu'à la fin de la ligne
       xxx
       ),
     ]
     ]
   };
   };
Ligne 66 : Ligne 93 :


* [http://highlightjs.readthedocs.io/en/latest/css-classes-reference.html CSS classes reference]
* [http://highlightjs.readthedocs.io/en/latest/css-classes-reference.html CSS classes reference]
== Test ==
<filebox fn='test/detect/[nouveau langage]/default.txt' lang='nohighlight'>
Code de démo
</filebox>
<filebox fn='test/markup/[nouveau langage]/default.txt' lang='nohighlight'>
Code de démo
<!-- comment -->
</filebox>
<filebox fn='test/markup/[nouveau langage]/default.expect.txt' lang='nohighlight'>
Expected result
<span class="hljs-comment">&lt;!-- comment --&gt;</span>
</filebox>
== Pre-defined modes and regular expressions ==
<filebox fn='src/lib/modes.js' collapsed>
export const IDENT_RE = '[a-zA-Z]\\w*';
export const TITLE_MODE = {
  scope: 'title',
  begin: IDENT_RE,
  relevance: 0
};
export const NUMBER_RE = '\\b\\d+(\\.\\d+)?';
export const NUMBER_MODE = {
  scope: 'number',
  begin: NUMBER_RE,
  relevance: 0
};
export const C_LINE_COMMENT_MODE = COMMENT('//', '$');
export const C_BLOCK_COMMENT_MODE = COMMENT('/\\*', '\\*/');
export const HASH_COMMENT_MODE = COMMENT('#', '$');
</filebox>


== Category ==
== Category ==

Dernière version du 8 avril 2023 à 17:15

Links

External Languages

Build

Bash.svg 
git clone https://github.com/isagalaev/highlight.js

cd highlight.js/
# installation des dépendances dans ./node_modules
# npm i utilise le fichier package.json
npm i

# création du dossier build et de ses fichiers
node tools/build.js -t browser -n :common csharp cpp
# -t browser, target (browser, cdn, node, all)
# -n, Disable compression
# :common, langages de base
# csharp cpp, les langages c# et c++

# the build result is in the build/ directory.

Test

Après avoir buildé

  • build/demo/index.html
  • tools/developer.html
Bash.svg 
# run unit test
cd test
npm test

Ajouter un nouveau langage

src/languages/[nouveau langage].js 
/*
 * Language: [nouveau langage]
 * Requires: xml.js, csharp.js
 * Author: Moi <moi@domaine.fr>
 * Category: common
 */

function(hljs) {
  const KEYWORDS = {
    $pattern: /-[a-z]+/,
    keyword: 'abc def',
    literal: 'null false true',
    type: 'string int',
    built_in: 'constant class function'
  };

  const comment = hljs.COMMENT(
    '//',  // tout ce qui commence par //
    '$'    // jusqu'à la fin de la ligne
  );

  const xxx = {
    scope: 'predefined scope',
    begin: '= ',
    end: ' ='
  };

  return {
    aliases: ['name1', 'name2'],
    keywords: KEYWORDS,
    illegal: /::/,
    contains: [                // Sub-modes
      comment,
      hljs.HASH_COMMENT_MODE,  // already defined comment pattern
      xxx
    ]
  };
}

Test

test/detect/[nouveau langage]/default.txt 
Code de démo
test/markup/[nouveau langage]/default.txt 
Code de démo
<!-- comment -->
test/markup/[nouveau langage]/default.expect.txt 
Expected result
<span class="hljs-comment">&lt;!-- comment --&gt;</span>

Pre-defined modes and regular expressions

src/lib/modes.js 
export const IDENT_RE = '[a-zA-Z]\\w*';
export const TITLE_MODE = {
  scope: 'title',
  begin: IDENT_RE,
  relevance: 0
};

export const NUMBER_RE = '\\b\\d+(\\.\\d+)?';
export const NUMBER_MODE = {
  scope: 'number',
  begin: NUMBER_RE,
  relevance: 0
};

export const C_LINE_COMMENT_MODE = COMMENT('//', '$');
export const C_BLOCK_COMMENT_MODE = COMMENT('/\\*', '\\*/');
export const HASH_COMMENT_MODE = COMMENT('#', '$');

Category

assembler common config css
enterprise functional graphics lisp
markup protocols scientific scripting
system template

Installation

Bash.svg 
npm install -g highlight.js
# highlight.js → /usr/lib/node_modules/highlight.js/lib/
# languages → /usr/lib/node_modules/highlight.js/lib/languages
# css → /usr/lib/node_modules/highlight.js/styles/
Récupérée de « http://wiki.bananeatomic.fr/index.php?title=Highlight.js&oldid=27816 »