TinyMCE and Prism code highlighter wraps all code in one line

Question

I am using tinymce editor with laravel to publish articles in my website. I used tinymce codesample plugin and prismjs to highlight code of my articles. the code is highlighted properly but the problem is all codes inside the pre tags are wrapped together.

My tinymce configuration is:

tinymce.init({
    selector: '#content',
    height: 500,
    plugins: 'codesample code',
    codesample_languages: [
        {text: 'HTML/XML', value: 'markup'},
        {text: 'JavaScript', value: 'javascript'},
        {text: 'CSS', value: 'css'},
        {text: 'PHP', value: 'php'},
        {text: 'Ruby', value: 'ruby'},
        {text: 'Python', value: 'python'},
        {text: 'Java', value: 'java'},
        {text: 'C', value: 'c'},
        {text: 'C#', value: 'csharp'},
        {text: 'C++', value: 'cpp'}
    ],
    toolbar: 'codesample code',
    content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
});

I am showing the content in laravel blade file like this:

{!! $post->content !!}

When I post the article it looks like this image in the link https://photos.app.goo.gl/4kbDtyNa7Rdkv7mZ9

And the result is like this https://photos.app.goo.gl/Y9f8Gipzh3akChHW7

Tried my best but still unsuccessful. It would be great help if anyone could give the solution or any suggestion.