PageRenderTime 28ms CodeModel.GetById 27ms RepoModel.GetById 0ms app.codeStats 0ms

/demo/js/highlight/README.md

https://gitlab.com/e0/handsontable
Markdown | 139 lines | 97 code | 42 blank | 0 comment | 0 complexity | 86b795b8afda8af041d895b3bdd56c4f MD5 | raw file
  1. # Highlight.js
  2. Highlight.js highlights syntax in code examples on blogs, forums and,
  3. in fact, on any web page. It's very easy to use because it works
  4. automatically: finds blocks of code, detects a language, highlights it.
  5. Autodetection can be fine tuned when it fails by itself (see "Heuristics").
  6. ## Installation and usage
  7. The download package includes the file "highlight.pack.js" which is a full
  8. compressed version of the library intended for use in production. All
  9. uncompressed source files are also available, feel free to look into them!
  10. The script is installed by linking to a single file and making a single
  11. initialization call:
  12. ```html
  13. <script type="text/javascript" src="highlight.pack.js"></script>
  14. <script type="text/javascript">
  15. hljs.initHighlightingOnLoad();
  16. </script>
  17. ```
  18. Also you can replace TAB ('\x09') characters used for indentation in your code
  19. with some fixed number of spaces or with a `<span>` to give them special
  20. styling:
  21. ```html
  22. <script type="text/javascript">
  23. hljs.tabReplace = ' '; // 4 spaces
  24. // ... or
  25. hljs.tabReplace = '<span class="indent">\t</span>';
  26. hljs.initHighlightingOnLoad();
  27. </script>
  28. ```
  29. The script looks in your page for fragments `<pre><code>...</code></pre>`
  30. that are traditionally used to mark up code examples. Their content is
  31. marked up by logical pieces with defined class names.
  32. ### Custom initialization
  33. If you use different markup for code blocks you can initialize them manually
  34. with `highlightBlock(code, tabReplace)` function. It takes a DOM element
  35. containing the code to highlight and optionally a string with which to replace
  36. TAB characters.
  37. Initialization using, for example, jQuery might look like this:
  38. ```javascript
  39. $(document).ready(function() {
  40. $('pre code').each(function(i, e) {hljs.highlightBlock(e, ' ')});
  41. });
  42. ```
  43. If your code container relies on `<br>` tags instead of line breaks (i.e. if
  44. it's not `<pre>`) pass `true` into third parameter of `highlightBlock`:
  45. ```javascript
  46. $('div.code').each(function(i, e) {hljs.highlightBlock(e, null, true)});
  47. ```
  48. ### Styling
  49. Elements of code marked up with classes can be styled as desired:
  50. ```css
  51. .comment {
  52. color: gray;
  53. }
  54. .keyword {
  55. font-weight: bold;
  56. }
  57. .python .string {
  58. color: blue;
  59. }
  60. .html .atribute .value {
  61. color: green;
  62. }
  63. ```
  64. Highlight.js comes with several style themes located in "styles" directory that
  65. can be used directly or as a base for your own experiments.
  66. **Note**: provided styles work for code defined inside `<pre>` blocks. If you use
  67. custom markup you should modify styles accordingly.
  68. For full reference list of classes see [classref.txt][cr].
  69. [cr]: http://github.com/isagalaev/highlight.js/blob/master/classref.txt
  70. ## Export
  71. File export.html contains a little program that allows you to paste in a code
  72. snippet and then copy and paste the resulting HTML code generated by the
  73. highlighter. This is useful in situations when you can't use the script itself
  74. on a site.
  75. ## Heuristics
  76. Autodetection of a code's language is done using a simple heuristic:
  77. the program tries to highlight a fragment with all available languages and
  78. counts all syntactic structures that it finds along the way. The language
  79. with greatest count wins.
  80. This means that in short fragments the probability of an error is high
  81. (and it really happens sometimes). In this cases you can set the fragment's
  82. language explicitly by assigning a class to the `<code>` element:
  83. ```html
  84. <pre><code class="html">...</code></pre>
  85. ```
  86. You can use class names recommended in HTML5: "language-html",
  87. "language-php". Classes also can be assigned to the `<pre>` element.
  88. To disable highlighting of a fragment altogether use "no-highlight" class:
  89. ```html
  90. <pre><code class="no-highlight">...</code></pre>
  91. ```
  92. ## Meta
  93. - Version: 6.2
  94. - URL: http://softwaremaniacs.org/soft/highlight/en/
  95. - Author: Ivan Sagalaev (<maniac@softwaremaniacs.org>)
  96. For the license terms see LICENSE files.
  97. For the list of contributors see AUTHORS.en.txt file.