Suggestion: Code snippet to support tags

[drodil]

Currently the code snippet can set range for the lines to show. This is nice feature but is hard to maintain if the source code changes. To make this more easier I would like to see something like this:

// Simple calculator app
// https://github.com/JS-Beginners/Calculator-JavaScript-Project
(function () {

    let screen = document.querySelector(".screen");
    let buttons = document.querySelectorAll(".btn");
    let clear = document.querySelector(".btn-clear");
    let equal = document.querySelector(".btn-equal");

    // retrieve data from numbers that are clicked
    // @retype_start: button_loop
    buttons.forEach(function (button) {
        button.addEventListener("click", function (e) {
            let value = e.target.dataset.num;
            screen.value += value;
        })
    });
    // @retype_end

    equal.addEventListener("click", function (e) {
        if (screen.value === "") {
            screen.value = "Please Enter a Value";
        } else {
            let answer = eval(screen.value);
            screen.value = answer;
        }
    })

    clear.addEventListener("click", function (e) {
        screen.value = "";
    })

})();

And then the document file could do something like this:

:::code source="../static/sample.js" tag="button_loop" :::

Which would render the loop in the documentation like this:

    buttons.forEach(function (button) {
        button.addEventListener("click", function (e) {
            let value = e.target.dataset.num;
            screen.value += value;
        })
    });

This would really help a lot if the source code changes. The tags used can be rethought if retype_start and retype_end are not good enough ;)

[geoffreymcgill]

Excellent idea. I think we can easily get this working. We basically have it working already, although only for C# code regions syntax.

We just need to come up with a clean comment syntax. I'll take a good look at your @retype_start proposal. Maybe we can find a more generic keyword syntax that is not Retype specific.

[geoffreymcgill]

Hi @drodil. How about the following @region syntax?

    // @region button_loop
    buttons.forEach(function (button) {
        button.addEventListener("click", function (e) {
            let value = e.target.dataset.num;
            screen.value += value;
        })
    });
    // @endregion

Then we would just expand the functionality of the existing Retype region to read .js files, and other file types in future releases.

:::code source="../static/sample.js" region="button_loop" :::

[drodil]

Works for me 🙂