Se você trocar ingrediente[ingrediente] já mostrará os ingredientes na mesma linha.

Mas como você aparentemente gostaria de um ingrediente por linha, há várias formas que você pode testar e escolher:

1 - comando mostra(ingrediente) após ingredientes.push(ingrediente);

2 - comando mostra(ingredientes[contador-1]) após ingredientes.push(ingrediente);

3 - implementar novo laço para percorrer ingredientes chamando mostra para cada um onde você chamou sua função mostra;

4 - ao invés de passar cada ingrediente para a função mostra, passar todos ingredientes e alterar na função o código para percorrê-los e chamar document.write pra cada um.

não consegui entender direito, você diz assim

 mostra( ingredientes[contador]);
    ingredientes.push(ingrediente)

 console.log(ingredientes);

Rogério, vou colocar abaixo como ficaria o código em cada uma das sugestões para você copiar e testar. Observe que nas três primeiras não coloquei o código todo pra resposta não ficar muito grande. Se não entender algum detalhe pode perguntar.

1) primeira sugestão:

...
    var contador = 1;

    while( contador <= quantidade) {

        var ingrediente = prompt("Informe o ingrediente " + contador);

        ingredientes.push(ingrediente);

        mostra(ingrediente);

        contador++;
    }

    console.log(ingredientes);
</script>

2) segunda sugestão:

...

    var contador = 1;

    while( contador <= quantidade) {

        var ingrediente = prompt("Informe o ingrediente " + contador);

        ingredientes.push(ingrediente);

        mostra(ingrediente[contador-1];

        contador++;
    }

    console.log(ingredientes);
</script>

3) terceira sugestão:

...

    var contador = 1;

    while( contador <= quantidade) {

        var ingrediente = prompt("Informe o ingrediente " + contador);

        ingredientes.push(ingrediente);

        contador++;
    }

    console.log(ingredientes);

    contador = 1;

    while (contador <= quantidade) {

        mostra(ingrediente[contador-1]);

        contador++;
    }
</script>

4) quarta sugestão:

<meta charset="UTF-8">

<h1>Receitas do Yan</h1>

<script>
    function mostra (frases) {
        var cont = 1;
        while ( cont <= frases.lenght) {
            document.write(frases[cont-1];
            document.write("<br>");
            cont++;
        }
    }


    var ingredientes = [];

    var quantidade = parseInt(prompt("Quantos ingredientes você vai adicionar?"));

    var contador = 1;

    while( contador <= quantidade) {

        var ingrediente = prompt("Informe o ingrediente " + contador);

        ingredientes.push(ingrediente);

        contador++;
    }

    console.log(ingredientes);

    mostra(Ingredientes);
</script>

Ola francisco, eu tentei aplicar o codigo 4 e os demais, e ele da falha

<meta charset="UTF-8">

<h1>Receitas do Yan</h1>

<script>
    function mostra (frases) {
        var cont = 1;
        while ( cont <= frases.lenght) {
            document.write(frases[cont - 1]);
            document.write("<br>");
            cont++;
        }
    }


    var ingredientes = [];

    var quantidade = parseInt(prompt("Quantos ingredientes você vai adicionar?"));

    var contador = 1;

    while( contador <= quantidade) {

        var ingrediente = prompt("Informe o ingrediente " + contador);

        ingredientes.push(ingrediente);

        contador++;
    }

    console.log(ingredientes);

    mostra(Ingredientes);
</script>

da esse erro "Uncaught ReferenceError: Ingredientes is not defined"

Coloquei i maiúsculo. Só trocar por minúsculo na última linha.

acho q entendi agora. Más ele so vai aparecer no console ?

Não, com qualquer um desses códigos eles aparecerão na página após o título Receitas do Yan.

Utilizando o código abaixo, copiado, pois também não consegui exibir na tela, somente no console. Ou seja, creio estar faltando algo, porém, quebrei a cabeça e não encontrei onde. Após digitar a quantidade e os ingredientes, no console a array os mostra, porém na tela só o título.

Receitas do Yan