Markdown tester

Zacznij przygodę z Markdown dzięki mojej aplikacji online!

Masz dość skomplikowanego formatowania tekstu w edytorach? Poznaj Markdown - lekki i intuicyjny język znaczników, który pozwoli Ci szybko tworzyć atrakcyjne treści bez zbędnego wysiłku. Dzięki mojej aplikacji online nauka i korzystanie z Markdown stają się dziecinnie proste!

Dlaczego warto wybrać Markdown?

Prostota: Skup się na treści, a nie na formatowaniu - używaj kilku intuicyjnych znaczników.
Uniwersalność: Idealny do tworzenia dokumentacji, blogów, wpisów na fora i nie tylko.
Widoczny podgląd na żywo: Od razu zobacz efekt swojej pracy w mojej aplikacji.
Bez instalacji: Wystarczy przeglądarka - pracuj gdziekolwiek i kiedykolwiek.

Dla kogo?

Twórców treści cyfrowych
Programistów piszących dokumentację techniczną
Blogerów i autorów artykułów
Każdego, kto chce tworzyć schludne i przejrzyste teksty szybko i wygodnie

Nie czekaj! Skorzystaj z mojej aplikacji online, by poznać możliwości Markdown i od razu tworzyć świetne treści.

Przykłady:

# Nagłówek 1
## Nagłówek 2

Jakiś tekst w paragrafie.

- [ ] opcja checklist 1
- [x] opcja checklist 2
- [ ] opcja checklist 3

- ( ) opcja radiolist 1
- (o) opcja radiolist 2
- ( ) opcja radiolist 3

| Lp. | Nazwa | Postęp |
| --- | --- | --- |
| 1 | Lorem Ipsum 1 | %[50%](50%){.bg-info} | 
| 2 | Lorem Ipsum 2 | %[ ](20%){.bg-danger} | 
| 3 | Lorem Ipsum 3 | %[90%](90%){.bg-success} | 

Bootstrap Icons ;bi bi-airplane-fill; ;bi bi-alarm-fill; ;bi bi-android2;
Font Awesome ;fa fa-balance-scale; ;fa fa-calendar; ;fa fa-bell;
;text-primary~To jest tekst primary;
;text-secondary~To jest tekst secondary;
;text-success~To jest tekst success;
;text-danger~To jest tekst danger;

{Tytuł wideo}(video)(link do video){.w-50 .d-block .mx-auto}

{Tytuł audio}(audio)(link do audio)

> [!PRIMARY](Tytuł)
> Jakiś tekst w alercie primary

> [!SECONDARY](Tytuł)
> Jakiś tekst w alercie secondary

> [INFO](Tytuł)
> Jakiś tekst w objaśnieniu info

> [^INFO](Tytuł)
> Jakiś tekst w objaśnieniu info z ikoną

^[Tytuł iframe](link do iframe)

Tekst Markdown

Silnik renderowania

Wyrenderowany widok

Wygenerowany html

Pokaż kod tej aplikacji

Kod po stronie przeglądarki

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css" integrity="sha512-uf06llspW44/LZpHzHT6qBOIVODjWtv4MxCricRxkzvopAlSWnTf6hpZTFxuuZcuNE9CBQhqE0Seu1CoRk84nQ==" crossorigin="anonymous" referrerpolicy="no-referrer">
<div id="app">
    <div class="row my-5">
        <div class="col-12">
            <label for="markdown" class="form-label">Tekst Markdown</label>
            <textarea id="markdown" class="form-control"></textarea>                    
        </div>
    </div>
    <div class="row my-5">
        <div class="col-sm-6">
            <label for="engine" class="form-label">Silnik renderowania</label>
            <select id="engine" class="form-select" data-bind="value: engine">
                <option value="parsedown">wewnętrzny (Parsedown Extended)</option>
                <option value="marked">zewnętrzny (Marked.js)</option>
            </select>            
        </div>
    </div>
    <div class="my-5">
        <button class="btn btn-primary" data-bind="click: convert">Konwertuj na HTML</button>
    </div>
    <!-- ko if: success -->
    <div>
        <h4 class="text-center my-5">Wyrenderowany widok</h4>
        <div data-bind="html: result"></div>
    </div>    
    <div>
        <h4 class="text-center my-5">Wygenerowany html</h4>
        <pre><code class="overflow-auto" data-bind="text: result"></code></pre>        
    </div>
    <!-- /ko -->
</div>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js" integrity="sha512-8RnEqURPUc5aqFEN04aQEiPlSAdE0jlFS/9iGgUyNtwFnSKCXhmB6ZTNl7LnDtDWKabJIASzXrzD0K+LYexU9g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/xml/xml.min.js" integrity="sha512-LarNmzVokUmcA7aUDtqZ6oTS+YXmUKzpGdm8DxC46A6AHu+PQiYCUlwEGWidjVYMo/QXZMFMIadZtrkfApYp/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/meta.min.js" integrity="sha512-/2x+sfL5ERHfoViXm/UncFBzaD54f2bkjEui6w2IheEUafG2gcHJv3gQ4VDIqNr+LuApQwpnsjjrEMXI43nPzg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/markdown/markdown.min.js" integrity="sha512-DmMao0nRIbyDjbaHc8fNd3kxGsZj9PCU6Iu/CeidLQT9Py8nYVA5n0PqXYmvqNdU+lCiTHOM/4E7bM/G8BttJg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/addon/edit/matchbrackets.min.js" integrity="sha512-GSYCbN/le5gNmfAWVEjg1tKnOH7ilK6xCLgA7c48IReoIR2g2vldxTM6kZlN6o3VtWIe6fHu/qhwxIt11J8EBA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
//Knockout.js App ViewModel    
var ViewModel = function()
{
    var self = this;
    self.markdown = ko.observable('');
    self.engine = ko.observable('parsedown');
    self.result = ko.observable('');
    self.success = ko.observable(false);    

    self.convert = function ()
    {
        var markdown = self.markdown();
        self.result('');    
        var engine = self.engine();
        if (engine == 'marked')
        {
            self.result(marked.parse(markdown));    
            self.success(true);
            return;
        }
        
        var data = {
            markdown: markdown,
            token: '6bad91c5f01a0a78a5504d7c09f9f8153951b42a'
        };
        
        self.success(false);
        axios.post(urlSite('public/ajax/app/exec/3'), data, {headers: {'Content-Type': 'application/x-www-form-urlencoded'}})        
          .then(function (response) {
              self.result(response.data.data);
              self.success(true);
        }).catch(function(error) {
              self.success(false);
              BootstrapToast.show({title: 'Błąd', message: error.response.data.message, when: 'teraz', type: 'text-bg-danger'});
        });
    };
};
var vm = new ViewModel();
ko.applyBindings(vm, document.getElementById('app'));
//CodeMirror for textarea
var myTextarea = document.getElementById('markdown');  
var editor = CodeMirror.fromTextArea(myTextarea, {
        lineNumbers: true,
        matchBrackets: true,
        mode: "text/markdown",
        indentUnit: 4,
        indentWithTabs: false,
        enterMode: "keep",
        tabMode: "shift",
        extraKeys: {Tab: false, "Shift-Tab": false}
  });
  editor.setSize(null, 500);  
  editor.getWrapperElement().style["font-size"] = "14px";
  editor.getWrapperElement().style["background-color"] = "#eee8d5";  
  editor.refresh();    
  editor.on('change', (args) => { vm.markdown(editor.getValue()) } );  
    
  //WCAG missing form label fix  
  codemirrorTextareaIdFix("markdown");  
    
</script>

Kod po stronie serwera

$markdown = Input::post('markdown', '');
$html = Markdown::factory($markdown)
    ->render();

$output = ['data' => $html];

$response = Response::factory()
    ->headers('Content-Type', 'application/json')
    ->status(200)
    ->body(json_encode($output));

echo $response->send_headers()->body();

Tagi

Kohana Axios KnockoutJS

Ocena aplikacji

Dziękujemy!

()