Languages
[Edit]
EN

JavaScript - ini file with CodeMirror

14 points
Created by:
Root-ssh
68980

Using CodeMirror with JavaScript it is possible to use *.ini file syntax in following way.

Note: to highlight *.ini files it is necessary to set mode to text/x-ini.

1. INI file set from variable

Example in this section shows how to indicate type of content for CodeMirror.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/codemirror.min.css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/codemirror.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/mode/properties/properties.min.js"></script>
  </head>
<body>
  <div id="placeholder"></div>
  <script>

    var placeholder = document.getElementById('placeholder');

    var editor = CodeMirror(placeholder, {
        mode:  'text/x-ini',
        readOnly: false,
        lineNumbers: true,
        lineWrapping: false
    });

    var text = '; this is first comment\n' +
        '\n' +
        '[user]\n' +
        'name=John\n' +
        'description=This is simple description.\n' +
        'age=25\n' +
        'gender=male\n' +
        'role=student\n' +
        '\n' +
        '[http]\n' +
        '; this is second comment\n' +
        'server=dirask.com\n' +
        'port=80';

    editor.setValue(text);

  </script>
</body>
</html>

2. INI file syntax highlighting detected automatically and set from variable

Example in this section shows how to detect ini file automatically.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/codemirror.min.css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/codemirror.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/mode/properties/properties.min.js"></script>
  </head>
<body>
  <div id="placeholder"></div>
  <script>

    var placeholder = document.getElementById('placeholder');

    // CodeMirror detects automatically file type
    var editor = CodeMirror(placeholder, {
        readOnly: false,
        lineNumbers: true,
        lineWrapping: false
    });

    var text = '; this is first comment\n' +
        '\n' +
        '[user]\n' +
        'name=John\n' +
        'description=This is simple description.\n' +
        'age=25\n' +
        'gender=male\n' +
        'role=student\n' +
        '\n' +
        '[http]\n' +
        '; this is second comment\n' +
        'server=dirask.com\n' +
        'port=80';

    editor.setValue(text);

  </script>
</body>
</html>

3. INI file syntax highlighting built on textarea element

Example in this section shows how to indicate type of content for CodeMirror and replace indicated textarea element with beautiful highlighted code.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/codemirror.min.css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/codemirror.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/mode/properties/properties.min.js"></script>
  </head>
<body>
  <textarea id="textarea">; this is first comment

[user]
name=John
description=This is simple description.
age=25
gender=male
role=student

[http]
; this is second comment
server=dirask.com
port=80</textarea >
  <script>

    var textarea= document.getElementById('textarea');

    var editor = CodeMirror.fromTextArea(textarea, {
        mode:  'text/x-ini'
    });

  </script>
</body>
</html>

4. INI file syntax highlighting detected automatically and built on textarea element

Example in this section shows how to detect ini file automatically for CodeMirror and replace indicated textarea element with beautiful highlighted code.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/codemirror.min.css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/codemirror.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/mode/properties/properties.min.js"></script>
  </head>
<body>
  <textarea id="textarea">; this is first comment

[user]
name=John
description=This is simple description.
age=25
gender=male
role=student

[http]
; this is second comment
server=dirask.com
port=80</textarea >
  <script>

    var textarea= document.getElementById('textarea');

    // CodeMirror detects automatically file type
    var editor = CodeMirror.fromTextArea(textarea, {});

  </script>
</body>
</html>

See also

  1. CodeMirror CDN - cdnjs.com WebPage

References

  1. INI files / Properties files mode - CodeMirror Docs
Native Advertising
50 000 ad impressions - 449$
ūüöÄ
Get your tech brand or product in front of software developers.
For more information contact us:
Red dot
Dirask - friendly IT community for everyone.

‚̧ԳŹūüíĽ ūüôā

Join