Display border around code block in edit mode only

I often use code blocks to set anchors on a page, however, since they are not visible, it can be frustrating searching around to find them again. I would like the code block to be visible when I am in edit mode, but otherwise not visible. Here is the code I tried without luck:

/*
 ** display border around code blocks in edit mode only **
*/

body:not(.sqs-edit-mode) .source-code
{
  display: none !important;
  opacity: 0 !important;
}
body.sqs-edit-mode .source-code
{
  display: flex !important; 
  border: 1px solid red !important;
  opacity: 1 !important;
}

Thanks.

Thanks @creedon. That does exactly what I was looking for.